From 68bb8dd68875b8404766598b8b0ac28272b71e1c Mon Sep 17 00:00:00 2001 From: Patrick Hangauer Date: Tue, 9 Aug 2022 14:36:23 -0500 Subject: [PATCH 01/59] [EPAD8-1717] - installs and enables gin admin theme --- services/drupal/composer.json | 1 + services/drupal/composer.lock | 123 +++++++++++++++++- .../sync/block.block.gin_breadcrumbs.yml | 22 ++++ .../config/sync/block.block.gin_content.yml | 22 ++++ .../sync/block.block.gin_local_actions.yml | 20 +++ .../config/sync/block.block.gin_messages.yml | 22 ++++ .../sync/block.block.gin_page_title.yml | 20 +++ .../block.block.gin_primary_local_tasks.yml | 22 ++++ .../block.block.gin_secondary_local_tasks.yml | 22 ++++ .../drupal/config/sync/core.extension.yml | 1 + .../environment_indicator.switcher.dev_f1.yml | 1 + ...nt_indicator.switcher.espanol_stage_f1.yml | 1 + ...ronment_indicator.switcher.main_es_f1a.yml | 1 + ...nvironment_indicator.switcher.main_f1a.yml | 1 + .../environment_indicator.switcher.qa_f1.yml | 1 + ...ment_indicator.switcher.release_es_f1a.yml | 1 + ...ronment_indicator.switcher.release_f1a.yml | 1 + ...nvironment_indicator.switcher.stage_f1.yml | 1 + services/drupal/config/sync/gin.settings.yml | 16 +++ services/drupal/config/sync/system.theme.yml | 2 +- 20 files changed, 299 insertions(+), 2 deletions(-) create mode 100644 services/drupal/config/sync/block.block.gin_breadcrumbs.yml create mode 100644 services/drupal/config/sync/block.block.gin_content.yml create mode 100644 services/drupal/config/sync/block.block.gin_local_actions.yml create mode 100644 services/drupal/config/sync/block.block.gin_messages.yml create mode 100644 services/drupal/config/sync/block.block.gin_page_title.yml create mode 100644 services/drupal/config/sync/block.block.gin_primary_local_tasks.yml create mode 100644 services/drupal/config/sync/block.block.gin_secondary_local_tasks.yml create mode 100644 services/drupal/config/sync/gin.settings.yml diff --git a/services/drupal/composer.json b/services/drupal/composer.json index 629bf3a76d..a0d78f473e 100644 --- a/services/drupal/composer.json +++ b/services/drupal/composer.json @@ -253,6 +253,7 @@ "drupal/fixed_block_content": "^1.1", "drupal/flood_control": "^2.1", "drupal/focal_point": "^1.5", + "drupal/gin": "^3.0", "drupal/group": "^1.2", "drupal/group_content_menu": "^1.0", "drupal/group_outsider_in": "^1.0-beta1", diff --git a/services/drupal/composer.lock b/services/drupal/composer.lock index de7821b1bc..75ff3dda9a 100644 --- a/services/drupal/composer.lock +++ b/services/drupal/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "7a33b6068089380003d71571d92b7162", + "content-hash": "1c7a0e791bd1af0231fdbda1d8921775", "packages": [ { "name": "asm89/stack-cors", @@ -5501,6 +5501,127 @@ "irc": "irc://irc.freenode.org/drupal-contribute" } }, + { + "name": "drupal/gin", + "version": "3.0.0-beta5", + "source": { + "type": "git", + "url": "https://git.drupalcode.org/project/gin.git", + "reference": "8.x-3.0-beta5" + }, + "dist": { + "type": "zip", + "url": "https://ftp.drupal.org/files/projects/gin-8.x-3.0-beta5.zip", + "reference": "8.x-3.0-beta5", + "shasum": "651b2047990067e26158368e3aab7f27366a81e9" + }, + "require": { + "drupal/core": "^8.9 || ^9 || ^10", + "drupal/gin_toolbar": "^1.0@beta" + }, + "type": "drupal-theme", + "extra": { + "drupal": { + "version": "8.x-3.0-beta5", + "datestamp": "1656071885", + "security-coverage": { + "status": "not-covered", + "message": "Beta releases are not covered by Drupal security advisories." + } + } + }, + "notification-url": "https://packages.drupal.org/8/downloads", + "scripts": { + "phpcs": [ + "phpcs -s --runtime-set ignore_warnings_on_exit 1 --runtime-set ignore_errors_on_exit 0 'web/modules/custom'" + ] + }, + "license": [ + "GPL-2.0-or-later" + ], + "authors": [ + { + "name": "Sascha Eggenberger (saschaeggi)", + "homepage": "https://www.drupal.org/u/saschaeggi", + "role": "Maintainer" + } + ], + "description": "For a better Admin and Content Editor Experience.", + "homepage": "https://www.drupal.org/project/gin", + "support": { + "source": "https://git.drupalcode.org/project/gin", + "issues": "https://www.drupal.org/project/issues/gin" + }, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/saschaeggi" + }, + { + "type": "other", + "url": "https://paypal.me/saschaeggi" + } + ] + }, + { + "name": "drupal/gin_toolbar", + "version": "1.0.0-beta22", + "source": { + "type": "git", + "url": "https://git.drupalcode.org/project/gin_toolbar.git", + "reference": "8.x-1.0-beta22" + }, + "dist": { + "type": "zip", + "url": "https://ftp.drupal.org/files/projects/gin_toolbar-8.x-1.0-beta22.zip", + "reference": "8.x-1.0-beta22", + "shasum": "630b4acb208411b78c61d83c9a27741c546202de" + }, + "require": { + "drupal/core": "^8 || ^9 || ^10" + }, + "type": "drupal-module", + "extra": { + "drupal": { + "version": "8.x-1.0-beta22", + "datestamp": "1649709351", + "security-coverage": { + "status": "not-covered", + "message": "Beta releases are not covered by Drupal security advisories." + } + } + }, + "notification-url": "https://packages.drupal.org/8/downloads", + "license": [ + "GPL-2.0+" + ], + "authors": [ + { + "name": "Sascha Eggenberger (saschaeggi)", + "homepage": "https://www.drupal.org/u/saschaeggi", + "role": "Maintainer" + } + ], + "description": "Gin Toolbar for Frontend use", + "homepage": "https://www.drupal.org/project/gin_toolbar", + "keywords": [ + "Drupal" + ], + "support": { + "source": "http://cgit.drupalcode.org/gin_toolbar", + "issues": "https://www.drupal.org/project/issues/gin_toolbar" + }, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/saschaeggi" + }, + { + "type": "other", + "url": "https://paypal.me/saschaeggi" + } + ] + }, { "name": "drupal/group", "version": "1.3.0", diff --git a/services/drupal/config/sync/block.block.gin_breadcrumbs.yml b/services/drupal/config/sync/block.block.gin_breadcrumbs.yml new file mode 100644 index 0000000000..5492f1b411 --- /dev/null +++ b/services/drupal/config/sync/block.block.gin_breadcrumbs.yml @@ -0,0 +1,22 @@ +uuid: 71eca986-288c-4391-8ecb-4422827e2c5c +langcode: en +status: true +dependencies: + module: + - system + theme: + - gin +_core: + default_config_hash: y9X3xgCsO59pQyzNLzY1D3SDJJxCHILLWkpPnmuTJ2E +id: gin_breadcrumbs +theme: gin +region: breadcrumb +weight: 0 +provider: null +plugin: system_breadcrumb_block +settings: + id: system_breadcrumb_block + label: Breadcrumbs + label_display: '0' + provider: system +visibility: { } diff --git a/services/drupal/config/sync/block.block.gin_content.yml b/services/drupal/config/sync/block.block.gin_content.yml new file mode 100644 index 0000000000..4cc9c5005c --- /dev/null +++ b/services/drupal/config/sync/block.block.gin_content.yml @@ -0,0 +1,22 @@ +uuid: 1859948b-da76-42f1-b04c-ec91bb663e1c +langcode: en +status: true +dependencies: + module: + - system + theme: + - gin +_core: + default_config_hash: hBHXB7hC05XU7pDYzETt-GUcpFlogK1gkjyAsg0Ym58 +id: gin_content +theme: gin +region: content +weight: 0 +provider: null +plugin: system_main_block +settings: + id: system_main_block + label: 'Main page content' + label_display: '0' + provider: system +visibility: { } diff --git a/services/drupal/config/sync/block.block.gin_local_actions.yml b/services/drupal/config/sync/block.block.gin_local_actions.yml new file mode 100644 index 0000000000..465a72f73b --- /dev/null +++ b/services/drupal/config/sync/block.block.gin_local_actions.yml @@ -0,0 +1,20 @@ +uuid: 094499ec-ac51-4409-b012-ac4fea3debeb +langcode: en +status: true +dependencies: + theme: + - gin +_core: + default_config_hash: OQ9aJ-4qVwK1x00o9EOYK4eFDjQr_HLpbPiJaPSVZiQ +id: gin_local_actions +theme: gin +region: content +weight: -10 +provider: null +plugin: local_actions_block +settings: + id: local_actions_block + label: 'Primary admin actions' + label_display: '0' + provider: core +visibility: { } diff --git a/services/drupal/config/sync/block.block.gin_messages.yml b/services/drupal/config/sync/block.block.gin_messages.yml new file mode 100644 index 0000000000..9c04a76326 --- /dev/null +++ b/services/drupal/config/sync/block.block.gin_messages.yml @@ -0,0 +1,22 @@ +uuid: 4b0fa86f-bc27-45b2-8d87-3d55b32e2899 +langcode: en +status: true +dependencies: + module: + - system + theme: + - gin +_core: + default_config_hash: WvPhI8OwllG0gE69-F8qL3ai3nd5SbYD6JpmEuZcyok +id: gin_messages +theme: gin +region: highlighted +weight: 0 +provider: null +plugin: system_messages_block +settings: + id: system_messages_block + label: 'Status messages' + label_display: '0' + provider: system +visibility: { } diff --git a/services/drupal/config/sync/block.block.gin_page_title.yml b/services/drupal/config/sync/block.block.gin_page_title.yml new file mode 100644 index 0000000000..5c135f2f01 --- /dev/null +++ b/services/drupal/config/sync/block.block.gin_page_title.yml @@ -0,0 +1,20 @@ +uuid: af6ef0ee-81a3-4c3e-8fb9-caecbcb236e8 +langcode: en +status: true +dependencies: + theme: + - gin +_core: + default_config_hash: HLQY2xgby8K3vN_98hiOSasOhm9pdCsH234-s0duJ8Q +id: gin_page_title +theme: gin +region: header +weight: -30 +provider: null +plugin: page_title_block +settings: + id: page_title_block + label: 'Page title' + label_display: '0' + provider: core +visibility: { } diff --git a/services/drupal/config/sync/block.block.gin_primary_local_tasks.yml b/services/drupal/config/sync/block.block.gin_primary_local_tasks.yml new file mode 100644 index 0000000000..fc35cae4ed --- /dev/null +++ b/services/drupal/config/sync/block.block.gin_primary_local_tasks.yml @@ -0,0 +1,22 @@ +uuid: 65b262f0-92b6-4637-97e5-b6fe8238b9e0 +langcode: en +status: true +dependencies: + theme: + - gin +_core: + default_config_hash: Hh01DLj9k7UnNdPpOQXHZHW7GHf2OPNDQyCJF7_R9ac +id: gin_primary_local_tasks +theme: gin +region: header +weight: 0 +provider: null +plugin: local_tasks_block +settings: + id: local_tasks_block + label: 'Primary tabs' + label_display: '0' + provider: core + primary: true + secondary: false +visibility: { } diff --git a/services/drupal/config/sync/block.block.gin_secondary_local_tasks.yml b/services/drupal/config/sync/block.block.gin_secondary_local_tasks.yml new file mode 100644 index 0000000000..6ac45ccc71 --- /dev/null +++ b/services/drupal/config/sync/block.block.gin_secondary_local_tasks.yml @@ -0,0 +1,22 @@ +uuid: 361cb93c-3a4b-47a0-b6cd-cbb3b4ad2356 +langcode: en +status: true +dependencies: + theme: + - gin +_core: + default_config_hash: BCWhood0xXFQYqxFgL1spXdb9KeIuXH1YvTdjIEedDg +id: gin_secondary_local_tasks +theme: gin +region: pre_content +weight: 0 +provider: null +plugin: local_tasks_block +settings: + id: local_tasks_block + label: 'Secondary tabs' + label_display: '0' + provider: core + primary: false + secondary: true +visibility: { } diff --git a/services/drupal/config/sync/core.extension.yml b/services/drupal/config/sync/core.extension.yml index e2b3457662..cf1f43095d 100644 --- a/services/drupal/config/sync/core.extension.yml +++ b/services/drupal/config/sync/core.extension.yml @@ -222,4 +222,5 @@ theme: epa_theme: 0 claro: 0 epa_seven: 0 + gin: 0 profile: minimal diff --git a/services/drupal/config/sync/environment_indicator.switcher.dev_f1.yml b/services/drupal/config/sync/environment_indicator.switcher.dev_f1.yml index c54c90cd28..382f3c4832 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.dev_f1.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.dev_f1.yml @@ -6,5 +6,6 @@ machine: dev_f1 description: null name: Dev url: 'https://dev.epa.byf1.io' +path: null fg_color: '#000000' bg_color: '#ffffff' diff --git a/services/drupal/config/sync/environment_indicator.switcher.espanol_stage_f1.yml b/services/drupal/config/sync/environment_indicator.switcher.espanol_stage_f1.yml index 5fbc4c85b2..aeac6349bf 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.espanol_stage_f1.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.espanol_stage_f1.yml @@ -6,5 +6,6 @@ machine: espanol_stage_f1 description: null name: 'Espanol stage' url: 'https://espanol.epa.byf1.io' +path: null fg_color: '#000000' bg_color: '#ffffff' diff --git a/services/drupal/config/sync/environment_indicator.switcher.main_es_f1a.yml b/services/drupal/config/sync/environment_indicator.switcher.main_es_f1a.yml index c5b6148ba1..694292012b 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.main_es_f1a.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.main_es_f1a.yml @@ -6,5 +6,6 @@ machine: main_es_f1a description: null name: 'Main - Espanol' url: 'https://main-es.epa.byf1.dev' +path: null fg_color: '#000000' bg_color: '#ffffff' diff --git a/services/drupal/config/sync/environment_indicator.switcher.main_f1a.yml b/services/drupal/config/sync/environment_indicator.switcher.main_f1a.yml index 2a4a293418..5f139e4c88 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.main_f1a.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.main_f1a.yml @@ -6,5 +6,6 @@ machine: main_f1a description: null name: Main url: 'https://main.epa.byf1.dev' +path: null fg_color: '#000000' bg_color: '#ffffff' diff --git a/services/drupal/config/sync/environment_indicator.switcher.qa_f1.yml b/services/drupal/config/sync/environment_indicator.switcher.qa_f1.yml index 455906eb51..52f4492904 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.qa_f1.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.qa_f1.yml @@ -6,5 +6,6 @@ machine: qa_f1 description: null name: QA url: 'https://qa.epa.byf1.io' +path: null fg_color: '#000000' bg_color: '#ffffff' diff --git a/services/drupal/config/sync/environment_indicator.switcher.release_es_f1a.yml b/services/drupal/config/sync/environment_indicator.switcher.release_es_f1a.yml index b1123d6d08..d642c28725 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.release_es_f1a.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.release_es_f1a.yml @@ -6,5 +6,6 @@ machine: release_es_f1a description: null name: 'Release - Espanol' url: 'https://release-es.epa.byf1.dev' +path: null fg_color: '#000000' bg_color: '#ffffff' diff --git a/services/drupal/config/sync/environment_indicator.switcher.release_f1a.yml b/services/drupal/config/sync/environment_indicator.switcher.release_f1a.yml index 6a8e2c59c6..1f94201e88 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.release_f1a.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.release_f1a.yml @@ -6,5 +6,6 @@ machine: release_f1a description: null name: Release url: 'https://release.epa.byf1.dev' +path: null fg_color: '#000000' bg_color: '#ffffff' diff --git a/services/drupal/config/sync/environment_indicator.switcher.stage_f1.yml b/services/drupal/config/sync/environment_indicator.switcher.stage_f1.yml index 82f7f99fd7..28719d5887 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.stage_f1.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.stage_f1.yml @@ -6,5 +6,6 @@ machine: stage_f1 description: null name: Stage url: 'https://stage.epa.byf1.io' +path: null fg_color: '#000000' bg_color: '#ffffff' diff --git a/services/drupal/config/sync/gin.settings.yml b/services/drupal/config/sync/gin.settings.yml new file mode 100644 index 0000000000..37ebacd8dd --- /dev/null +++ b/services/drupal/config/sync/gin.settings.yml @@ -0,0 +1,16 @@ +_core: + default_config_hash: UvSCt3S_NldJPFzvhSNOy9vWoPPFhmsmTC12vtVss9s +preset_accent_color: blue +preset_focus_color: gin +enable_darkmode: '0' +classic_toolbar: vertical +secondary_toolbar_frontend: true +logo: + use_default: true +high_contrast_mode: false +layout_density: default +show_description_toggle: false +show_user_theme_settings: false +third_party_settings: + shortcut: + module_link: true diff --git a/services/drupal/config/sync/system.theme.yml b/services/drupal/config/sync/system.theme.yml index 6cbca9bae4..4bcd920f87 100644 --- a/services/drupal/config/sync/system.theme.yml +++ b/services/drupal/config/sync/system.theme.yml @@ -1,4 +1,4 @@ _core: default_config_hash: 6lQ55NXM9ysybMQ6NzJj4dtiQ1dAkOYxdDompa-r_kk -admin: epa_seven +admin: gin default: epa_theme From e611b8d9ed3c83809c2bf8df39971cc59281fb6e Mon Sep 17 00:00:00 2001 From: Patrick Hangauer Date: Tue, 9 Aug 2022 14:55:28 -0500 Subject: [PATCH 02/59] [EPAD8-1717] - installs and enables gin layout builder and gin toolbar modules --- services/drupal/composer.json | 2 + services/drupal/composer.lock | 122 +++++++++++++++++- .../drupal/config/sync/core.extension.yml | 2 + .../drupal/config/sync/gin_lb.settings.yml | 4 + .../es/block.block.gin_breadcrumbs.yml | 2 + .../language/es/block.block.gin_content.yml | 2 + .../es/block.block.gin_local_actions.yml | 2 + .../language/es/block.block.gin_messages.yml | 2 + .../es/block.block.gin_page_title.yml | 2 + .../block.block.gin_primary_local_tasks.yml | 2 + .../block.block.gin_secondary_local_tasks.yml | 2 + 11 files changed, 143 insertions(+), 1 deletion(-) create mode 100644 services/drupal/config/sync/gin_lb.settings.yml create mode 100644 services/drupal/config/sync/language/es/block.block.gin_breadcrumbs.yml create mode 100644 services/drupal/config/sync/language/es/block.block.gin_content.yml create mode 100644 services/drupal/config/sync/language/es/block.block.gin_local_actions.yml create mode 100644 services/drupal/config/sync/language/es/block.block.gin_messages.yml create mode 100644 services/drupal/config/sync/language/es/block.block.gin_page_title.yml create mode 100644 services/drupal/config/sync/language/es/block.block.gin_primary_local_tasks.yml create mode 100644 services/drupal/config/sync/language/es/block.block.gin_secondary_local_tasks.yml diff --git a/services/drupal/composer.json b/services/drupal/composer.json index a0d78f473e..c3ad0f5965 100644 --- a/services/drupal/composer.json +++ b/services/drupal/composer.json @@ -254,6 +254,8 @@ "drupal/flood_control": "^2.1", "drupal/focal_point": "^1.5", "drupal/gin": "^3.0", + "drupal/gin_lb": "^1.0@beta", + "drupal/gin_toolbar": "^1.0@beta", "drupal/group": "^1.2", "drupal/group_content_menu": "^1.0", "drupal/group_outsider_in": "^1.0-beta1", diff --git a/services/drupal/composer.lock b/services/drupal/composer.lock index 75ff3dda9a..7ec90341d8 100644 --- a/services/drupal/composer.lock +++ b/services/drupal/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "1c7a0e791bd1af0231fdbda1d8921775", + "content-hash": "62c68183d982932db9f037c43d79c053", "packages": [ { "name": "asm89/stack-cors", @@ -5563,6 +5563,124 @@ } ] }, + { + "name": "drupal/gin_lb", + "version": "1.0.0-beta16", + "source": { + "type": "git", + "url": "https://git.drupalcode.org/project/gin_lb.git", + "reference": "1.0.0-beta16" + }, + "dist": { + "type": "zip", + "url": "https://ftp.drupal.org/files/projects/gin_lb-1.0.0-beta16.zip", + "reference": "1.0.0-beta16", + "shasum": "9893ca3258daff1d426e0e4f8b1bcbd1edbc2dae" + }, + "require": { + "drupal/core": "^9.3", + "drupal/gin_toolbar": "*" + }, + "require-dev": { + "composer/installers": "^1.2", + "cweagans/composer-patches": "~1.4", + "drupal/config_devel": "~1", + "drupal/console": "~1.0", + "drupal/core-composer-scaffold": "^8.0", + "drupal/core-dev": "^8.0", + "drupal/core-recommended": "~9.3.0", + "drupal/field_group": "3.x-dev@dev", + "drupal/gin": "^3.0@alpha", + "drupal/layout_builder_browser": "~1.2", + "drupal/layout_library": "~1.0@beta", + "drush/drush": "~10", + "openeuropa/task-runner": "~1.0-beta3", + "phpro/grumphp": "~1.3.0", + "phpspec/prophecy-phpunit": "^2.0" + }, + "type": "drupal-module", + "extra": { + "drupal": { + "version": "1.0.0-beta16", + "datestamp": "1654538336", + "security-coverage": { + "status": "not-covered", + "message": "Beta releases are not covered by Drupal security advisories." + } + }, + "enable-patching": false, + "composer-exit-on-patch-failure": true, + "drupal-scaffold": { + "locations": { + "web-root": "build/" + } + }, + "installer-paths": { + "build/core": [ + "type:drupal-core" + ], + "build/modules/contrib/{$name}": [ + "type:drupal-module" + ], + "build/profiles/contrib/{$name}": [ + "type:drupal-profile" + ], + "build/themes/contrib/{$name}": [ + "type:drupal-theme" + ], + "build/libraries/{$name}": [ + "type:drupal-library" + ] + } + }, + "autoload": { + "psr-4": { + "Drupal\\gin_lb_settings\\": "./src" + } + }, + "autoload-dev": { + "psr-4": { + "Drupal\\Tests\\gin_lb_settings\\": "./tests/src" + } + }, + "notification-url": "https://packages.drupal.org/8/downloads", + "scripts": { + "post-install-cmd": [ + "./vendor/bin/run drupal:site-setup" + ], + "post-update-cmd": [ + "./vendor/bin/run drupal:site-setup" + ] + }, + "license": [ + "GPL-2.0+" + ], + "authors": [ + { + "name": "Christian Wiedemann", + "homepage": "https://www.drupal.org/user/861002", + "email": "christian.wiedemann@key-tec.de" + }, + { + "name": "Duwid", + "homepage": "https://www.drupal.org/user/2693877" + }, + { + "name": "sch4lly", + "homepage": "https://www.drupal.org/user/856550" + } + ], + "description": "Gin Layout Builder", + "homepage": "https://www.drupal.org/project/gin_lb", + "keywords": [ + "drupal", + "ui", + "web" + ], + "support": { + "source": "https://git.drupalcode.org/project/gin_lb" + } + }, { "name": "drupal/gin_toolbar", "version": "1.0.0-beta22", @@ -20108,6 +20226,8 @@ "drupal/entity_clone": 10, "drupal/entitygroupfield": 15, "drupal/facets_pretty_paths": 20, + "drupal/gin_lb": 10, + "drupal/gin_toolbar": 10, "drupal/groupmedia": 15, "drupal/inline_entity_form": 5, "drupal/linkit_telephone": 20, diff --git a/services/drupal/config/sync/core.extension.yml b/services/drupal/config/sync/core.extension.yml index cf1f43095d..088454485b 100644 --- a/services/drupal/config/sync/core.extension.yml +++ b/services/drupal/config/sync/core.extension.yml @@ -94,6 +94,8 @@ module: focal_point: 0 gcontent_moderation: 0 gesso_helper: 0 + gin_lb: 0 + gin_toolbar: 0 gmedia: 0 gnode: 0 group: 0 diff --git a/services/drupal/config/sync/gin_lb.settings.yml b/services/drupal/config/sync/gin_lb.settings.yml new file mode 100644 index 0000000000..098a897c4b --- /dev/null +++ b/services/drupal/config/sync/gin_lb.settings.yml @@ -0,0 +1,4 @@ +_core: + default_config_hash: JwHy7mL25SLjSzNTOkFsf3M9xID52Dh7GMlqwLCY5Ro +toastify_cdn: 1 +enable_preview_regions: 0 diff --git a/services/drupal/config/sync/language/es/block.block.gin_breadcrumbs.yml b/services/drupal/config/sync/language/es/block.block.gin_breadcrumbs.yml new file mode 100644 index 0000000000..6e0e4c18ee --- /dev/null +++ b/services/drupal/config/sync/language/es/block.block.gin_breadcrumbs.yml @@ -0,0 +1,2 @@ +settings: + label: 'Enlaces de ayuda a la navegación' diff --git a/services/drupal/config/sync/language/es/block.block.gin_content.yml b/services/drupal/config/sync/language/es/block.block.gin_content.yml new file mode 100644 index 0000000000..36e9235de4 --- /dev/null +++ b/services/drupal/config/sync/language/es/block.block.gin_content.yml @@ -0,0 +1,2 @@ +settings: + label: 'Contenido principal de la página' diff --git a/services/drupal/config/sync/language/es/block.block.gin_local_actions.yml b/services/drupal/config/sync/language/es/block.block.gin_local_actions.yml new file mode 100644 index 0000000000..459ce626ee --- /dev/null +++ b/services/drupal/config/sync/language/es/block.block.gin_local_actions.yml @@ -0,0 +1,2 @@ +settings: + label: 'Acciones principales de la administración' diff --git a/services/drupal/config/sync/language/es/block.block.gin_messages.yml b/services/drupal/config/sync/language/es/block.block.gin_messages.yml new file mode 100644 index 0000000000..45667cbd82 --- /dev/null +++ b/services/drupal/config/sync/language/es/block.block.gin_messages.yml @@ -0,0 +1,2 @@ +settings: + label: 'Mensajes de estado' diff --git a/services/drupal/config/sync/language/es/block.block.gin_page_title.yml b/services/drupal/config/sync/language/es/block.block.gin_page_title.yml new file mode 100644 index 0000000000..a0c2f3d106 --- /dev/null +++ b/services/drupal/config/sync/language/es/block.block.gin_page_title.yml @@ -0,0 +1,2 @@ +settings: + label: 'Título de la página' diff --git a/services/drupal/config/sync/language/es/block.block.gin_primary_local_tasks.yml b/services/drupal/config/sync/language/es/block.block.gin_primary_local_tasks.yml new file mode 100644 index 0000000000..8183284027 --- /dev/null +++ b/services/drupal/config/sync/language/es/block.block.gin_primary_local_tasks.yml @@ -0,0 +1,2 @@ +settings: + label: 'Solapas principales' diff --git a/services/drupal/config/sync/language/es/block.block.gin_secondary_local_tasks.yml b/services/drupal/config/sync/language/es/block.block.gin_secondary_local_tasks.yml new file mode 100644 index 0000000000..7674ece784 --- /dev/null +++ b/services/drupal/config/sync/language/es/block.block.gin_secondary_local_tasks.yml @@ -0,0 +1,2 @@ +settings: + label: 'Solapas secundarias' From fb0f1f242d1e1484048d12e12465862fbdbfb222 Mon Sep 17 00:00:00 2001 From: Patrick Hangauer Date: Thu, 18 Aug 2022 11:31:33 -0500 Subject: [PATCH 03/59] [EPAD8-1717] - changed admin theme from gin to claro --- services/drupal/config/sync/system.theme.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/drupal/config/sync/system.theme.yml b/services/drupal/config/sync/system.theme.yml index 4bcd920f87..8affdcef75 100644 --- a/services/drupal/config/sync/system.theme.yml +++ b/services/drupal/config/sync/system.theme.yml @@ -1,4 +1,4 @@ _core: default_config_hash: 6lQ55NXM9ysybMQ6NzJj4dtiQ1dAkOYxdDompa-r_kk -admin: gin +admin: claro default: epa_theme From 28d85489692828b68819380ea01ea85ce4b44e27 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Tue, 13 Sep 2022 13:20:09 -0400 Subject: [PATCH 04/59] EPAD8-1717: Add epa_claro admin theme --- .../block.block.epa_claro_breadcrumbs.yml | 20 ++ .../block.block.epa_claro_breadcrumbs.yml.xxx | 22 +++ .../sync/block.block.epa_claro_content.yml | 20 ++ .../block.block.epa_claro_content.yml.xxx | 22 +++ .../block.block.epa_claro_local_actions.yml | 18 ++ ...lock.block.epa_claro_local_actions.yml.xxx | 20 ++ .../sync/block.block.epa_claro_messages.yml | 20 ++ .../block.block.epa_claro_messages.yml.xxx | 22 +++ .../sync/block.block.epa_claro_page_title.yml | 18 ++ .../block.block.epa_claro_page_title.yml.xxx | 20 ++ ...ck.block.epa_claro_primary_local_tasks.yml | 20 ++ ...lock.epa_claro_primary_local_tasks.yml.xxx | 22 +++ ....block.epa_claro_secondary_local_tasks.yml | 20 ++ ...ck.epa_claro_secondary_local_tasks.yml.xxx | 22 +++ ...views_block__internal_alerts_block_1_4.yml | 24 +++ .../drupal/config/sync/core.extension.yml | 1 + services/drupal/config/sync/system.theme.yml | 2 +- .../web/themes/epa_claro/css/styles.css | 0 .../web/themes/epa_claro/epa_claro.info.yml | 171 ++++++++++++++++++ .../themes/epa_claro/epa_claro.libraries.yml | 5 + 20 files changed, 488 insertions(+), 1 deletion(-) create mode 100644 services/drupal/config/sync/block.block.epa_claro_breadcrumbs.yml create mode 100644 services/drupal/config/sync/block.block.epa_claro_breadcrumbs.yml.xxx create mode 100644 services/drupal/config/sync/block.block.epa_claro_content.yml create mode 100644 services/drupal/config/sync/block.block.epa_claro_content.yml.xxx create mode 100644 services/drupal/config/sync/block.block.epa_claro_local_actions.yml create mode 100644 services/drupal/config/sync/block.block.epa_claro_local_actions.yml.xxx create mode 100644 services/drupal/config/sync/block.block.epa_claro_messages.yml create mode 100644 services/drupal/config/sync/block.block.epa_claro_messages.yml.xxx create mode 100644 services/drupal/config/sync/block.block.epa_claro_page_title.yml create mode 100644 services/drupal/config/sync/block.block.epa_claro_page_title.yml.xxx create mode 100644 services/drupal/config/sync/block.block.epa_claro_primary_local_tasks.yml create mode 100644 services/drupal/config/sync/block.block.epa_claro_primary_local_tasks.yml.xxx create mode 100644 services/drupal/config/sync/block.block.epa_claro_secondary_local_tasks.yml create mode 100644 services/drupal/config/sync/block.block.epa_claro_secondary_local_tasks.yml.xxx create mode 100644 services/drupal/config/sync/block.block.views_block__internal_alerts_block_1_4.yml create mode 100644 services/drupal/web/themes/epa_claro/css/styles.css create mode 100644 services/drupal/web/themes/epa_claro/epa_claro.info.yml create mode 100644 services/drupal/web/themes/epa_claro/epa_claro.libraries.yml diff --git a/services/drupal/config/sync/block.block.epa_claro_breadcrumbs.yml b/services/drupal/config/sync/block.block.epa_claro_breadcrumbs.yml new file mode 100644 index 0000000000..6fa5f13112 --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_breadcrumbs.yml @@ -0,0 +1,20 @@ +uuid: 4cc40de3-9386-4061-b2c8-9097e9556af3 +langcode: en +status: true +dependencies: + module: + - system + theme: + - epa_claro +id: epa_claro_breadcrumbs +theme: epa_claro +region: breadcrumb +weight: 0 +provider: null +plugin: system_breadcrumb_block +settings: + id: system_breadcrumb_block + label: Breadcrumbs + label_display: '0' + provider: system +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_breadcrumbs.yml.xxx b/services/drupal/config/sync/block.block.epa_claro_breadcrumbs.yml.xxx new file mode 100644 index 0000000000..38c32050d3 --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_breadcrumbs.yml.xxx @@ -0,0 +1,22 @@ +uuid: p088270f-6a3e-4738-84d2-250afb93909c +langcode: en +status: true +dependencies: + module: + - system + theme: + - epa_claro +_core: + default_config_hash: p6mUaCq5YPapRUABXRHfNTT6fxWIj5lgf0Mg4HaRJ_I +id: epa_claro_breadcrumbs +theme: epa_claro +region: breadcrumb +weight: 0 +provider: null +plugin: system_breadcrumb_block +settings: + id: system_breadcrumb_block + label: Breadcrumbs + label_display: '0' + provider: system +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_content.yml b/services/drupal/config/sync/block.block.epa_claro_content.yml new file mode 100644 index 0000000000..5bdcbcc8da --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_content.yml @@ -0,0 +1,20 @@ +uuid: e63e0959-b875-4cc7-b323-d884c363437a +langcode: en +status: true +dependencies: + module: + - system + theme: + - epa_claro +id: epa_claro_content +theme: epa_claro +region: content +weight: -2 +provider: null +plugin: system_main_block +settings: + id: system_main_block + label: 'Main page content' + label_display: '0' + provider: system +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_content.yml.xxx b/services/drupal/config/sync/block.block.epa_claro_content.yml.xxx new file mode 100644 index 0000000000..4b37e80429 --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_content.yml.xxx @@ -0,0 +1,22 @@ +uuid: p57e5948-0d7f-4e24-a8e4-227f9ed47e22 +langcode: en +status: true +dependencies: + module: + - system + theme: + - epa_claro +_core: + default_config_hash: pTwkfDaGeBUk6aerktJBDXso4fCsqLTQOuWKXE1xMPU +id: epa_claro_content +theme: epa_claro +region: content +weight: 0 +provider: null +plugin: system_main_block +settings: + id: system_main_block + label: 'Main page content' + label_display: '0' + provider: system +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_local_actions.yml b/services/drupal/config/sync/block.block.epa_claro_local_actions.yml new file mode 100644 index 0000000000..5a2da32348 --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_local_actions.yml @@ -0,0 +1,18 @@ +uuid: c7bb0e5d-9ffb-47a3-895a-7e6360d797fa +langcode: en +status: true +dependencies: + theme: + - epa_claro +id: epa_claro_local_actions +theme: epa_claro +region: content +weight: -3 +provider: null +plugin: local_actions_block +settings: + id: local_actions_block + label: 'Primary admin actions' + label_display: '0' + provider: core +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_local_actions.yml.xxx b/services/drupal/config/sync/block.block.epa_claro_local_actions.yml.xxx new file mode 100644 index 0000000000..6390f1283e --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_local_actions.yml.xxx @@ -0,0 +1,20 @@ +uuid: pa3a8ca9-2612-438f-ad70-8c1665cec213 +langcode: en +status: true +dependencies: + theme: + - epa_claro +_core: + default_config_hash: psZQ9lL2jTdH5am4LJiZ29RaivhzOf6vCpoRy6FZwIE +id: epa_claro_local_actions +theme: epa_claro +region: content +weight: -10 +provider: null +plugin: local_actions_block +settings: + id: local_actions_block + label: 'Primary admin actions' + label_display: '0' + provider: core +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_messages.yml b/services/drupal/config/sync/block.block.epa_claro_messages.yml new file mode 100644 index 0000000000..cc2d177c2c --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_messages.yml @@ -0,0 +1,20 @@ +uuid: c62cc703-5ad9-433b-b72e-de395c2a7707 +langcode: en +status: true +dependencies: + module: + - system + theme: + - epa_claro +id: epa_claro_messages +theme: epa_claro +region: highlighted +weight: 0 +provider: null +plugin: system_messages_block +settings: + id: system_messages_block + label: 'Status messages' + label_display: '0' + provider: system +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_messages.yml.xxx b/services/drupal/config/sync/block.block.epa_claro_messages.yml.xxx new file mode 100644 index 0000000000..6a6db082c0 --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_messages.yml.xxx @@ -0,0 +1,22 @@ +uuid: pf2bebe6-00cf-4313-8651-6fa142777be4 +langcode: en +status: true +dependencies: + module: + - system + theme: + - epa_claro +_core: + default_config_hash: pIy-YIc9d9s1isAtTIKWDBKd6kd2r6LxoYz_-hkLJco +id: epa_claro_messages +theme: epa_claro +region: highlighted +weight: 0 +provider: null +plugin: system_messages_block +settings: + id: system_messages_block + label: 'Status messages' + label_display: '0' + provider: system +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_page_title.yml b/services/drupal/config/sync/block.block.epa_claro_page_title.yml new file mode 100644 index 0000000000..525b5443c9 --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_page_title.yml @@ -0,0 +1,18 @@ +uuid: f0d06dad-fe3c-408a-8d9b-f43d95fc000f +langcode: en +status: true +dependencies: + theme: + - epa_claro +id: epa_claro_page_title +theme: epa_claro +region: header +weight: 0 +provider: null +plugin: page_title_block +settings: + id: page_title_block + label: 'Page title' + label_display: '0' + provider: core +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_page_title.yml.xxx b/services/drupal/config/sync/block.block.epa_claro_page_title.yml.xxx new file mode 100644 index 0000000000..78b4eb79a5 --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_page_title.yml.xxx @@ -0,0 +1,20 @@ +uuid: pae756e0-b3d6-4f6f-aed3-568eb7845d42 +langcode: en +status: true +dependencies: + theme: + - epa_claro +_core: + default_config_hash: pfXKmThltk6eewwrjAEaxVPxzPEVHV1UfNjjOUQ5A7g +id: epa_claro_page_title +theme: epa_claro +region: header +weight: -2 +provider: null +plugin: page_title_block +settings: + id: page_title_block + label: 'Page title' + label_display: '0' + provider: core +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_primary_local_tasks.yml b/services/drupal/config/sync/block.block.epa_claro_primary_local_tasks.yml new file mode 100644 index 0000000000..ce12a7c60b --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_primary_local_tasks.yml @@ -0,0 +1,20 @@ +uuid: 5d4ccd32-161d-4550-8863-82f443ee3779 +langcode: en +status: true +dependencies: + theme: + - epa_claro +id: epa_claro_primary_local_tasks +theme: epa_claro +region: header +weight: 0 +provider: null +plugin: local_tasks_block +settings: + id: local_tasks_block + label: 'Primary tabs' + label_display: '0' + provider: core + primary: true + secondary: false +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_primary_local_tasks.yml.xxx b/services/drupal/config/sync/block.block.epa_claro_primary_local_tasks.yml.xxx new file mode 100644 index 0000000000..e88b62245f --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_primary_local_tasks.yml.xxx @@ -0,0 +1,22 @@ +uuid: p5d16ab3-2a4d-4829-a9bc-112da989a3a2 +langcode: en +status: true +dependencies: + theme: + - epa_claro +_core: + default_config_hash: pcvXIzw8NabmQCWMPqBz0mvIQZzXUZB3OeOTa5eqbCo +id: epa_claro_primary_local_tasks +theme: epa_claro +region: header +weight: -1 +provider: null +plugin: local_tasks_block +settings: + id: local_tasks_block + label: 'Primary tabs' + label_display: '0' + provider: core + primary: true + secondary: false +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_secondary_local_tasks.yml b/services/drupal/config/sync/block.block.epa_claro_secondary_local_tasks.yml new file mode 100644 index 0000000000..4f1c14a603 --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_secondary_local_tasks.yml @@ -0,0 +1,20 @@ +uuid: 6b91908e-ecb4-4e93-ba1a-b971520054d1 +langcode: en +status: true +dependencies: + theme: + - epa_claro +id: epa_claro_secondary_local_tasks +theme: epa_claro +region: pre_content +weight: 0 +provider: null +plugin: local_tasks_block +settings: + id: local_tasks_block + label: 'Secondary tabs' + label_display: '0' + provider: core + primary: false + secondary: true +visibility: { } diff --git a/services/drupal/config/sync/block.block.epa_claro_secondary_local_tasks.yml.xxx b/services/drupal/config/sync/block.block.epa_claro_secondary_local_tasks.yml.xxx new file mode 100644 index 0000000000..7768a43bfc --- /dev/null +++ b/services/drupal/config/sync/block.block.epa_claro_secondary_local_tasks.yml.xxx @@ -0,0 +1,22 @@ +uuid: pb370fb4-54e1-4803-8a4a-ec0f905c69d9 +langcode: en +status: true +dependencies: + theme: + - epa_claro +_core: + default_config_hash: p_hUB_AW2IvKbVo3lVG-B2KfTsX6xJ-CxfOcRYUnL3E +id: epa_claro_secondary_local_tasks +theme: epa_claro +region: pre_content +weight: 0 +provider: null +plugin: local_tasks_block +settings: + id: local_tasks_block + label: 'Secondary tabs' + label_display: '0' + provider: core + primary: false + secondary: true +visibility: { } diff --git a/services/drupal/config/sync/block.block.views_block__internal_alerts_block_1_4.yml b/services/drupal/config/sync/block.block.views_block__internal_alerts_block_1_4.yml new file mode 100644 index 0000000000..9a24d4afda --- /dev/null +++ b/services/drupal/config/sync/block.block.views_block__internal_alerts_block_1_4.yml @@ -0,0 +1,24 @@ +uuid: caf977a0-1d86-4fdf-987f-3b39c73eafe3 +langcode: en +status: true +dependencies: + config: + - views.view.internal_alerts + module: + - views + theme: + - epa_claro +id: views_block__internal_alerts_block_1_4 +theme: epa_claro +region: header +weight: 0 +provider: null +plugin: 'views_block:internal_alerts-block_1' +settings: + id: 'views_block:internal_alerts-block_1' + label: '' + label_display: visible + provider: views + views_label: '' + items_per_page: none +visibility: { } diff --git a/services/drupal/config/sync/core.extension.yml b/services/drupal/config/sync/core.extension.yml index b8fdb5b33d..f7d9376114 100644 --- a/services/drupal/config/sync/core.extension.yml +++ b/services/drupal/config/sync/core.extension.yml @@ -227,4 +227,5 @@ theme: claro: 0 epa_seven: 0 gin: 0 + epa_claro: 0 profile: minimal diff --git a/services/drupal/config/sync/system.theme.yml b/services/drupal/config/sync/system.theme.yml index 8affdcef75..fc03f0cac9 100644 --- a/services/drupal/config/sync/system.theme.yml +++ b/services/drupal/config/sync/system.theme.yml @@ -1,4 +1,4 @@ _core: default_config_hash: 6lQ55NXM9ysybMQ6NzJj4dtiQ1dAkOYxdDompa-r_kk -admin: claro +admin: epa_claro default: epa_theme diff --git a/services/drupal/web/themes/epa_claro/css/styles.css b/services/drupal/web/themes/epa_claro/css/styles.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/services/drupal/web/themes/epa_claro/epa_claro.info.yml b/services/drupal/web/themes/epa_claro/epa_claro.info.yml new file mode 100644 index 0000000000..b17e16ef8d --- /dev/null +++ b/services/drupal/web/themes/epa_claro/epa_claro.info.yml @@ -0,0 +1,171 @@ +name: EPA Claro +type: theme +base theme: claro +description: 'Modifies the Claro theme for EPA.' +alt text: 'Screenshot of Claro, Drupal administration theme.' +package: Core +version: VERSION +core_version_requirement: ^8 || ^9 + +libraries: + - epa_claro/global-styling + - claro/global-styling + +libraries-override: + system/base: + css: + component: + css/components/ajax-progress.module.css: css/components/ajax-progress.module.css + css/components/autocomplete-loading.module.css: css/components/autocomplete-loading.module.css + css/components/system-status-counter.css: css/components/system-status-counter.css + css/components/system-status-report-counters.css: css/components/system-status-report-counters.css + css/components/system-status-report-general-info.css: css/components/system-status-report-general-info.css + css/components/tabledrag.module.css: css/components/tabledrag.css + + system/admin: + css: + theme: + css/system.admin.css: false + + core/drupal.dialog.off_canvas: + css: + base: + misc/dialog/off-canvas.theme.css: css/base/off-canvas.theme.css + + core/drupal.dropbutton: + css: + component: + misc/dropbutton/dropbutton.css: css/components/dropbutton.css + + core/drupal.vertical-tabs: + css: + component: + misc/vertical-tabs.css: false + js: + misc/vertical-tabs.js: js/vertical-tabs.js + + core/drupal.autocomplete: + css: + theme: + assets/vendor/jquery.ui/themes/base/theme.css: false + + core/drupal.tabbingmanager: + css: + theme: + assets/vendor/jquery.ui/themes/base/theme.css: false + + core/drupal.dialog: + css: + component: + assets/vendor/jquery.ui/themes/base/dialog.css: false + theme: + assets/vendor/jquery.ui/themes/base/theme.css: false + + user/drupal.user: + css: + component: + css/user.module.css: false + + field_ui/drupal.field_ui: + css: + theme: + css/field_ui.admin.css: css/theme/field-ui.admin.css + + node/drupal.node: + css: + layout: + css/node.module.css: false + + node/form: + css: + layout: + css/node.module.css: false + + toolbar/toolbar: + css: + component: + css/toolbar.module.css: css/components/toolbar.module.css + theme: + css/toolbar.theme.css: css/theme/toolbar.theme.css + css/toolbar.icons.theme.css: css/theme/toolbar.icons.theme.css + + toolbar/toolbar.menu: + css: + state: + css/toolbar.menu.css: css/state/toolbar.menu.css + + views_ui/admin.styling: + css: + component: + css/views_ui.admin.css: css/components/views_ui.admin.css + theme: + css/views_ui.admin.theme.css: css/theme/views_ui.admin.theme.css + +libraries-extend: + ckeditor/drupal.ckeditor: + - claro/ckeditor-editor + ckeditor/drupal.ckeditor.admin: + - claro/ckeditor-admin + core/ckeditor: + - claro/ckeditor-dialog + core/drupal.collapse: + - claro/details-focus + core/drupal.dialog: + - claro/claro.drupal.dialog + - claro/claro.jquery.ui + core/drupal.dropbutton: + - claro/dropbutton + core/drupal.checkbox: + - claro/checkbox + core/drupal.message: + - claro/messages + core/drupal.progress: + - claro/progress + core/drupal.tabbingmanager: + - claro/claro.jquery.ui + core/drupal.tabledrag: + - claro/claro.tabledrag + core/drupal.vertical-tabs: + - claro/vertical-tabs + file/drupal.file: + - claro/file + filter/drupal.filter.admin: + - claro/filter + filter/drupal.filter: + - claro/filter + system/admin: + - claro/system.admin + core/drupal.autocomplete: + - claro/autocomplete + - claro/claro.jquery.ui + tour/tour-styling: + - claro/tour-styling + shortcut/drupal.shortcut: + - claro/drupal.shortcut + core/drupal.ajax: + - claro/ajax + user/drupal.user: + - claro/form.password-confirm + views/views.module: + - claro/views + media/media_embed_ckeditor_theme: + - claro/classy.media_embed_ckeditor_theme + media_library/ui: + - claro/media_library.ui + media_library/view: + - claro/media_library.theme + media_library/widget: + - claro/media_library.theme + +regions: + header: 'Header' + pre_content: 'Pre-content' + breadcrumb: Breadcrumb + highlighted: Highlighted + help: Help + content: Content + page_top: 'Page top' + page_bottom: 'Page bottom' + sidebar_first: 'First sidebar' +regions_hidden: + - sidebar_first diff --git a/services/drupal/web/themes/epa_claro/epa_claro.libraries.yml b/services/drupal/web/themes/epa_claro/epa_claro.libraries.yml new file mode 100644 index 0000000000..1b3884064d --- /dev/null +++ b/services/drupal/web/themes/epa_claro/epa_claro.libraries.yml @@ -0,0 +1,5 @@ +global-styling: + version: VERSION + css: + base: + css/styles.css: {} From 387438522424d98e4d9176f28669c82601ad2b3c Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Tue, 13 Sep 2022 13:35:08 -0400 Subject: [PATCH 05/59] EPAD8-1417: Update CSV export button --- .../web/themes/epa_claro/css/styles.css | 34 +++++++++++++++++++ .../templates/misc/export-icon.html.twig | 18 ++++++++++ 2 files changed, 52 insertions(+) create mode 100644 services/drupal/web/themes/epa_claro/templates/misc/export-icon.html.twig diff --git a/services/drupal/web/themes/epa_claro/css/styles.css b/services/drupal/web/themes/epa_claro/css/styles.css index e69de29bb2..306afc42f9 100644 --- a/services/drupal/web/themes/epa_claro/css/styles.css +++ b/services/drupal/web/themes/epa_claro/css/styles.css @@ -0,0 +1,34 @@ +.icon { + display: inline-block; + fill: currentColor; + height: 1em; + overflow: visible !important; + position: relative; + top: -2px; + transition: none; + vertical-align: middle; + width: 1em; +} + +.icon * { + /* Fixes delayed transitions in Chrome. */ + transition: none; +} + +.icon.is-spaced-before { + margin-left: 0.25em; +} + +.icon.is-spaced-after { + margin-right: 0.25em; +} + +.icon--rss { + color: #ee802f; +} + +.rss-feed { + display: inline-block; + font-size: 1.266rem; + margin-top: 1em; +} diff --git a/services/drupal/web/themes/epa_claro/templates/misc/export-icon.html.twig b/services/drupal/web/themes/epa_claro/templates/misc/export-icon.html.twig new file mode 100644 index 0000000000..6293e1d526 --- /dev/null +++ b/services/drupal/web/themes/epa_claro/templates/misc/export-icon.html.twig @@ -0,0 +1,18 @@ +{# +/** + * @file + * Default theme implementation for an export icon. + * + * Available variables: + * - url: An internal system path of the data export. + * - attributes: Remaining HTML attributes for the export link. + * - format: The export format (csv, json, xml). + * - class: HTML classes to be applied to the export link. + * + * @ingroup themeable + */ +#} + + + {{- 'Download @format'|t({'@format': format}) }} + From 79b5f0d309ad09f517a59759065d26446c24bc97 Mon Sep 17 00:00:00 2001 From: Patrick Hangauer Date: Tue, 20 Sep 2022 10:40:33 -0500 Subject: [PATCH 06/59] [EPAD8-1681] - creates banner image media type, adds banner image field to banner slide paragraph type, configures media library view to filter by web area --- ...orm_display.media.banner_image.default.yml | 71 +++++++++++++++++++ ...splay.media.banner_image.media_library.yml | 40 +++++++++++ ...display.paragraph.banner_slide.default.yml | 9 +++ ...iew_display.media.banner_image.default.yml | 36 ++++++++++ ...splay.media.banner_image.media_library.yml | 37 ++++++++++ ...display.paragraph.banner_slide.default.yml | 12 +++- ...media.banner_image.field_media_image_1.yml | 43 +++++++++++ ...agraph.banner_slide.field_banner_image.yml | 35 +++++++++ ...ield.storage.media.field_media_image_1.yml | 30 ++++++++ ...d.storage.paragraph.field_banner_image.yml | 20 ++++++ ..._type.group_content_type_1ea3403e68c48.yml | 19 +++++ ...ge.content_settings.media.banner_image.yml | 11 +++ .../config/sync/media.type.banner_image.yml | 13 ++++ ...avior_settings.media_type_banner_image.yml | 14 ++++ .../config/sync/views.view.media_library.yml | 63 +++++++++++++++- 15 files changed, 451 insertions(+), 2 deletions(-) create mode 100644 services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml create mode 100644 services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml create mode 100644 services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml create mode 100644 services/drupal/config/sync/core.entity_view_display.media.banner_image.media_library.yml create mode 100644 services/drupal/config/sync/field.field.media.banner_image.field_media_image_1.yml create mode 100644 services/drupal/config/sync/field.field.paragraph.banner_slide.field_banner_image.yml create mode 100644 services/drupal/config/sync/field.storage.media.field_media_image_1.yml create mode 100644 services/drupal/config/sync/field.storage.paragraph.field_banner_image.yml create mode 100644 services/drupal/config/sync/group.content_type.group_content_type_1ea3403e68c48.yml create mode 100644 services/drupal/config/sync/language.content_settings.media.banner_image.yml create mode 100644 services/drupal/config/sync/media.type.banner_image.yml create mode 100644 services/drupal/config/sync/rabbit_hole.behavior_settings.media_type_banner_image.yml diff --git a/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml b/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml new file mode 100644 index 0000000000..9590664bd1 --- /dev/null +++ b/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml @@ -0,0 +1,71 @@ +uuid: f845f58f-ab15-4610-85ad-e6249e4d5685 +langcode: en +status: true +dependencies: + config: + - field.field.media.banner_image.field_media_image_1 + - image.style.thumbnail + - media.type.banner_image + module: + - path + - svg_image +id: media.banner_image.default +targetEntityType: media +bundle: banner_image +mode: default +content: + created: + type: datetime_timestamp + weight: 10 + region: content + settings: { } + third_party_settings: { } + field_media_image_1: + type: image_image + weight: 0 + region: content + settings: + progress_indicator: throbber + preview_image_style: thumbnail + third_party_settings: { } + langcode: + type: language_select + weight: 2 + region: content + settings: + include_locked: true + third_party_settings: { } + name: + type: string_textfield + weight: -5 + region: content + settings: + size: 60 + placeholder: '' + third_party_settings: { } + path: + type: path + weight: 30 + region: content + settings: { } + third_party_settings: { } + status: + type: boolean_checkbox + weight: 100 + region: content + settings: + display_label: true + third_party_settings: { } + uid: + type: entity_reference_autocomplete + weight: 5 + region: content + settings: + match_operator: CONTAINS + match_limit: 10 + size: 60 + placeholder: '' + third_party_settings: { } +hidden: + entitygroupfield: true + replace_file: true diff --git a/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml b/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml new file mode 100644 index 0000000000..528c7b0ee7 --- /dev/null +++ b/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml @@ -0,0 +1,40 @@ +uuid: 77f421f9-da6f-4af0-849d-1bb7a77dc415 +langcode: en +status: true +dependencies: + config: + - core.entity_form_mode.media.media_library + - field.field.media.banner_image.field_media_image_1 + - image.style.thumbnail + - media.type.banner_image + module: + - svg_image +id: media.banner_image.media_library +targetEntityType: media +bundle: banner_image +mode: media_library +content: + field_media_image_1: + type: image_image + weight: 5 + region: content + settings: + progress_indicator: throbber + preview_image_style: thumbnail + third_party_settings: { } + name: + type: string_textfield + weight: 0 + region: content + settings: + size: 60 + placeholder: '' + third_party_settings: { } +hidden: + created: true + entitygroupfield: true + langcode: true + path: true + replace_file: true + status: true + uid: true diff --git a/services/drupal/config/sync/core.entity_form_display.paragraph.banner_slide.default.yml b/services/drupal/config/sync/core.entity_form_display.paragraph.banner_slide.default.yml index 922a98a5b7..b58ef26ef1 100644 --- a/services/drupal/config/sync/core.entity_form_display.paragraph.banner_slide.default.yml +++ b/services/drupal/config/sync/core.entity_form_display.paragraph.banner_slide.default.yml @@ -3,6 +3,7 @@ langcode: en status: true dependencies: config: + - field.field.paragraph.banner_slide.field_banner_image - field.field.paragraph.banner_slide.field_image - field.field.paragraph.banner_slide.field_text - field.field.paragraph.banner_slide.field_title @@ -10,12 +11,20 @@ dependencies: - paragraphs.paragraphs_type.banner_slide module: - focal_point + - media_library - text id: paragraph.banner_slide.default targetEntityType: paragraph bundle: banner_slide mode: default content: + field_banner_image: + type: media_library_widget + weight: 3 + region: content + settings: + media_types: { } + third_party_settings: { } field_image: type: image_focal_point weight: 2 diff --git a/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml b/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml new file mode 100644 index 0000000000..085de95a0f --- /dev/null +++ b/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml @@ -0,0 +1,36 @@ +uuid: e5f33182-c86e-4815-9b6e-5f4c4a2cc1af +langcode: en +status: true +dependencies: + config: + - field.field.media.banner_image.field_media_image_1 + - image.style.large + - media.type.banner_image + module: + - svg_image +id: media.banner_image.default +targetEntityType: media +bundle: banner_image +mode: default +content: + field_media_image_1: + type: image + label: visually_hidden + settings: + image_link: '' + image_style: large + svg_attributes: + width: null + height: null + svg_render_as_image: true + third_party_settings: { } + weight: 0 + region: content +hidden: + created: true + entitygroupfield: true + langcode: true + name: true + search_api_excerpt: true + thumbnail: true + uid: true diff --git a/services/drupal/config/sync/core.entity_view_display.media.banner_image.media_library.yml b/services/drupal/config/sync/core.entity_view_display.media.banner_image.media_library.yml new file mode 100644 index 0000000000..900ef41379 --- /dev/null +++ b/services/drupal/config/sync/core.entity_view_display.media.banner_image.media_library.yml @@ -0,0 +1,37 @@ +uuid: f9a138e2-8b86-4ec3-90b0-d24c1f6d3a38 +langcode: en +status: true +dependencies: + config: + - core.entity_view_mode.media.media_library + - field.field.media.banner_image.field_media_image_1 + - image.style.medium + - media.type.banner_image + module: + - svg_image +id: media.banner_image.media_library +targetEntityType: media +bundle: banner_image +mode: media_library +content: + thumbnail: + type: image + label: hidden + settings: + image_link: '' + image_style: medium + svg_attributes: + width: null + height: null + svg_render_as_image: true + third_party_settings: { } + weight: 0 + region: content +hidden: + created: true + entitygroupfield: true + field_media_image_1: true + langcode: true + name: true + search_api_excerpt: true + uid: true diff --git a/services/drupal/config/sync/core.entity_view_display.paragraph.banner_slide.default.yml b/services/drupal/config/sync/core.entity_view_display.paragraph.banner_slide.default.yml index a0f3eda0da..abceab56dc 100644 --- a/services/drupal/config/sync/core.entity_view_display.paragraph.banner_slide.default.yml +++ b/services/drupal/config/sync/core.entity_view_display.paragraph.banner_slide.default.yml @@ -3,19 +3,29 @@ langcode: en status: true dependencies: config: + - field.field.paragraph.banner_slide.field_banner_image - field.field.paragraph.banner_slide.field_image - field.field.paragraph.banner_slide.field_text - field.field.paragraph.banner_slide.field_title - image.style.hero - paragraphs.paragraphs_type.banner_slide module: - - image + - svg_image - text id: paragraph.banner_slide.default targetEntityType: paragraph bundle: banner_slide mode: default content: + field_banner_image: + type: entity_reference_entity_view + label: above + settings: + view_mode: default + link: false + third_party_settings: { } + weight: 3 + region: content field_image: type: image_url label: hidden diff --git a/services/drupal/config/sync/field.field.media.banner_image.field_media_image_1.yml b/services/drupal/config/sync/field.field.media.banner_image.field_media_image_1.yml new file mode 100644 index 0000000000..dc4d6bbf42 --- /dev/null +++ b/services/drupal/config/sync/field.field.media.banner_image.field_media_image_1.yml @@ -0,0 +1,43 @@ +uuid: 8d47feb9-a11f-41dc-a8d6-fe4b5e052bb5 +langcode: en +status: true +dependencies: + config: + - field.storage.media.field_media_image_1 + - media.type.banner_image + module: + - custom_add_another + - image +third_party_settings: + custom_add_another: + custom_add_another: '' + custom_remove: '' +id: media.banner_image.field_media_image_1 +field_name: field_media_image_1 +entity_type: media +bundle: banner_image +label: Image +description: '' +required: true +translatable: true +default_value: { } +default_value_callback: '' +settings: + handler: 'default:file' + handler_settings: { } + file_directory: '[date:custom:Y]-[date:custom:m]' + file_extensions: 'png gif jpg jpeg' + max_filesize: '' + max_resolution: '' + min_resolution: '' + alt_field: true + alt_field_required: true + title_field: false + title_field_required: false + default_image: + uuid: null + alt: '' + title: '' + width: null + height: null +field_type: image diff --git a/services/drupal/config/sync/field.field.paragraph.banner_slide.field_banner_image.yml b/services/drupal/config/sync/field.field.paragraph.banner_slide.field_banner_image.yml new file mode 100644 index 0000000000..6d854900c1 --- /dev/null +++ b/services/drupal/config/sync/field.field.paragraph.banner_slide.field_banner_image.yml @@ -0,0 +1,35 @@ +uuid: 1caceda3-2a8c-484c-905e-c1d0ebdafc68 +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_banner_image + - media.type.banner_image + - paragraphs.paragraphs_type.banner_slide + module: + - custom_add_another +third_party_settings: + custom_add_another: + custom_add_another: '' + custom_remove: '' +id: paragraph.banner_slide.field_banner_image +field_name: field_banner_image +entity_type: paragraph +bundle: banner_slide +label: 'Banner Image' +description: '' +required: false +translatable: false +default_value: { } +default_value_callback: '' +settings: + handler: 'default:media' + handler_settings: + target_bundles: + banner_image: banner_image + sort: + field: _none + direction: ASC + auto_create: false + auto_create_bundle: '' +field_type: entity_reference diff --git a/services/drupal/config/sync/field.storage.media.field_media_image_1.yml b/services/drupal/config/sync/field.storage.media.field_media_image_1.yml new file mode 100644 index 0000000000..060ff28053 --- /dev/null +++ b/services/drupal/config/sync/field.storage.media.field_media_image_1.yml @@ -0,0 +1,30 @@ +uuid: d4001383-a789-475e-8f51-4928b14389d8 +langcode: en +status: true +dependencies: + module: + - file + - image + - media +id: media.field_media_image_1 +field_name: field_media_image_1 +entity_type: media +type: image +settings: + target_type: file + display_field: false + display_default: false + uri_scheme: public + default_image: + uuid: null + alt: '' + title: '' + width: null + height: null +module: image +locked: false +cardinality: 1 +translatable: true +indexes: { } +persist_with_no_fields: false +custom_storage: false diff --git a/services/drupal/config/sync/field.storage.paragraph.field_banner_image.yml b/services/drupal/config/sync/field.storage.paragraph.field_banner_image.yml new file mode 100644 index 0000000000..b0c18b1363 --- /dev/null +++ b/services/drupal/config/sync/field.storage.paragraph.field_banner_image.yml @@ -0,0 +1,20 @@ +uuid: 291ccb04-8815-47ca-905c-54790a3ba042 +langcode: en +status: true +dependencies: + module: + - media + - paragraphs +id: paragraph.field_banner_image +field_name: field_banner_image +entity_type: paragraph +type: entity_reference +settings: + target_type: media +module: core +locked: false +cardinality: 1 +translatable: true +indexes: { } +persist_with_no_fields: false +custom_storage: false diff --git a/services/drupal/config/sync/group.content_type.group_content_type_1ea3403e68c48.yml b/services/drupal/config/sync/group.content_type.group_content_type_1ea3403e68c48.yml new file mode 100644 index 0000000000..161e3cb575 --- /dev/null +++ b/services/drupal/config/sync/group.content_type.group_content_type_1ea3403e68c48.yml @@ -0,0 +1,19 @@ +uuid: 63c8aca5-6162-46ea-9bec-9b52041cb11c +langcode: en +status: true +dependencies: + config: + - group.type.web_area + - media.type.banner_image + module: + - groupmedia + - media +id: group_content_type_1ea3403e68c48 +label: 'Web Area: Group media (Banner Image)' +description: 'Adds Banner Image content to groups both publicly and privately.' +group_type: web_area +content_plugin: 'group_media:banner_image' +plugin_config: + group_cardinality: 0 + entity_cardinality: 1 + use_creation_wizard: false diff --git a/services/drupal/config/sync/language.content_settings.media.banner_image.yml b/services/drupal/config/sync/language.content_settings.media.banner_image.yml new file mode 100644 index 0000000000..666f19bcd1 --- /dev/null +++ b/services/drupal/config/sync/language.content_settings.media.banner_image.yml @@ -0,0 +1,11 @@ +uuid: ff296045-7f8d-4420-a09d-b543e6c01b90 +langcode: en +status: true +dependencies: + config: + - media.type.banner_image +id: media.banner_image +target_entity_type_id: media +target_bundle: banner_image +default_langcode: site_default +language_alterable: false diff --git a/services/drupal/config/sync/media.type.banner_image.yml b/services/drupal/config/sync/media.type.banner_image.yml new file mode 100644 index 0000000000..3cac01f5cf --- /dev/null +++ b/services/drupal/config/sync/media.type.banner_image.yml @@ -0,0 +1,13 @@ +uuid: 00273d6d-8cda-4472-ac35-d85560b5e729 +langcode: en +status: true +dependencies: { } +id: banner_image +label: 'Banner Image' +description: '' +source: image +queue_thumbnail_downloads: false +new_revision: false +source_configuration: + source_field: field_media_image_1 +field_map: { } diff --git a/services/drupal/config/sync/rabbit_hole.behavior_settings.media_type_banner_image.yml b/services/drupal/config/sync/rabbit_hole.behavior_settings.media_type_banner_image.yml new file mode 100644 index 0000000000..2ae5c79ed3 --- /dev/null +++ b/services/drupal/config/sync/rabbit_hole.behavior_settings.media_type_banner_image.yml @@ -0,0 +1,14 @@ +uuid: b6479696-b1b5-4f5a-a91d-10d15c3c30e8 +langcode: en +status: true +dependencies: + config: + - media.type.banner_image +id: media_type_banner_image +entity_type_id: media_type +entity_id: banner_image +action: display_page +allow_override: 1 +redirect: '' +redirect_code: 301 +redirect_fallback_action: access_denied diff --git a/services/drupal/config/sync/views.view.media_library.yml b/services/drupal/config/sync/views.view.media_library.yml index b92ddfb0e0..4331a8e282 100644 --- a/services/drupal/config/sync/views.view.media_library.yml +++ b/services/drupal/config/sync/views.view.media_library.yml @@ -8,8 +8,9 @@ dependencies: - taxonomy.vocabulary.media_tags module: - epa_media - - image + - epa_web_areas - search_api + - svg_image - user - views_autocomplete_filters id: media_library @@ -418,6 +419,7 @@ display: remember_roles: authenticated: authenticated anonymous: '0' + paragraphs_library_contributor: '0' layout_editor: '0' alerts_manager: '0' block_manager: '0' @@ -438,6 +440,65 @@ display: default_group: All default_group_multiple: { } group_items: { } + gid: + id: gid + table: search_api_index_media + field: gid + relationship: none + group_type: group + admin_label: '' + plugin_id: search_api_entity_reference + operator: or + value: { } + group: 1 + exposed: true + expose: + operator_id: gid_op + label: 'Web Area' + description: '' + use_operator: false + operator: gid_op + operator_limit_selection: false + operator_list: { } + identifier: gid + required: false + remember: false + multiple: false + remember_roles: + authenticated: authenticated + anonymous: '0' + paragraphs_library_contributor: '0' + layout_editor: '0' + alerts_manager: '0' + block_manager: '0' + system_editor: '0' + system_webmaster: '0' + menu_admin: '0' + administrator: '0' + reduce: 0 + is_grouped: false + group_info: + label: '' + description: '' + identifier: '' + optional: true + widget: select + multiple: false + remember: false + default_group: All + default_group_multiple: { } + group_items: { } + reduce_duplicates: 0 + handler: 'default:group' + handler_settings: + target_bundles: + web_area: web_area + sort: + field: _none + direction: ASC + auto_create: false + auto_create_bundle: '' + widget: autocomplete filter_groups: operator: AND groups: From 7f3ebaf6b87fbe667aa52f87f19ed3b3eaa80a5c Mon Sep 17 00:00:00 2001 From: Patrick Hangauer Date: Thu, 22 Sep 2022 09:22:31 -0500 Subject: [PATCH 07/59] [EPAD8-1681] - WIP updating config for banner image media type, adjusts field in twig --- ...orm_display.media.banner_image.default.yml | 6 ++-- ...splay.media.banner_image.media_library.yml | 17 ++++------- ...iew_display.media.banner_image.default.yml | 6 ++-- ...splay.media.banner_image.media_library.yml | 6 ++-- ....media.banner_image.field_media_image.yml} | 8 ++--- ...agraph.banner_slide.field_banner_image.yml | 2 +- ...eld.paragraph.banner_slide.field_image.yml | 2 +- ...ield.storage.media.field_media_image_1.yml | 30 ------------------- ...d.storage.paragraph.field_banner_image.yml | 2 +- ..._type.group_content_type_1ea3403e68c48.yml | 2 +- ...ge.content_settings.media.banner_image.yml | 2 +- .../config/sync/media.type.banner_image.yml | 9 +++--- ...avior_settings.media_type_banner_image.yml | 2 +- .../paragraph--banner-slide.html.twig | 8 ++++- 14 files changed, 36 insertions(+), 66 deletions(-) rename services/drupal/config/sync/{field.field.media.banner_image.field_media_image_1.yml => field.field.media.banner_image.field_media_image.yml} (82%) delete mode 100644 services/drupal/config/sync/field.storage.media.field_media_image_1.yml diff --git a/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml b/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml index 9590664bd1..cc4c4ce09a 100644 --- a/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml +++ b/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml @@ -1,9 +1,9 @@ -uuid: f845f58f-ab15-4610-85ad-e6249e4d5685 +uuid: fb36d2d1-59dd-48b8-97ef-2191dca71196 langcode: en status: true dependencies: config: - - field.field.media.banner_image.field_media_image_1 + - field.field.media.banner_image.field_media_image - image.style.thumbnail - media.type.banner_image module: @@ -20,7 +20,7 @@ content: region: content settings: { } third_party_settings: { } - field_media_image_1: + field_media_image: type: image_image weight: 0 region: content diff --git a/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml b/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml index 528c7b0ee7..169c3ccf53 100644 --- a/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml +++ b/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml @@ -1,10 +1,10 @@ -uuid: 77f421f9-da6f-4af0-849d-1bb7a77dc415 +uuid: 9814a11a-94fa-49aa-92b2-732e4087cbed langcode: en status: true dependencies: config: - core.entity_form_mode.media.media_library - - field.field.media.banner_image.field_media_image_1 + - field.field.media.banner_image.field_media_image - image.style.thumbnail - media.type.banner_image module: @@ -14,26 +14,19 @@ targetEntityType: media bundle: banner_image mode: media_library content: - field_media_image_1: + field_media_image: type: image_image - weight: 5 + weight: -50 region: content settings: progress_indicator: throbber preview_image_style: thumbnail third_party_settings: { } - name: - type: string_textfield - weight: 0 - region: content - settings: - size: 60 - placeholder: '' - third_party_settings: { } hidden: created: true entitygroupfield: true langcode: true + name: true path: true replace_file: true status: true diff --git a/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml b/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml index 085de95a0f..c7e0586879 100644 --- a/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml +++ b/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml @@ -1,9 +1,9 @@ -uuid: e5f33182-c86e-4815-9b6e-5f4c4a2cc1af +uuid: 4515ed10-0a3b-4a44-8e46-ffd04c4836ca langcode: en status: true dependencies: config: - - field.field.media.banner_image.field_media_image_1 + - field.field.media.banner_image.field_media_image - image.style.large - media.type.banner_image module: @@ -13,7 +13,7 @@ targetEntityType: media bundle: banner_image mode: default content: - field_media_image_1: + field_media_image: type: image label: visually_hidden settings: diff --git a/services/drupal/config/sync/core.entity_view_display.media.banner_image.media_library.yml b/services/drupal/config/sync/core.entity_view_display.media.banner_image.media_library.yml index 900ef41379..4bc87fb753 100644 --- a/services/drupal/config/sync/core.entity_view_display.media.banner_image.media_library.yml +++ b/services/drupal/config/sync/core.entity_view_display.media.banner_image.media_library.yml @@ -1,10 +1,10 @@ -uuid: f9a138e2-8b86-4ec3-90b0-d24c1f6d3a38 +uuid: cc542adc-4c27-446c-903a-7f6f3cf67938 langcode: en status: true dependencies: config: - core.entity_view_mode.media.media_library - - field.field.media.banner_image.field_media_image_1 + - field.field.media.banner_image.field_media_image - image.style.medium - media.type.banner_image module: @@ -30,7 +30,7 @@ content: hidden: created: true entitygroupfield: true - field_media_image_1: true + field_media_image: true langcode: true name: true search_api_excerpt: true diff --git a/services/drupal/config/sync/field.field.media.banner_image.field_media_image_1.yml b/services/drupal/config/sync/field.field.media.banner_image.field_media_image.yml similarity index 82% rename from services/drupal/config/sync/field.field.media.banner_image.field_media_image_1.yml rename to services/drupal/config/sync/field.field.media.banner_image.field_media_image.yml index dc4d6bbf42..d66aef4f6e 100644 --- a/services/drupal/config/sync/field.field.media.banner_image.field_media_image_1.yml +++ b/services/drupal/config/sync/field.field.media.banner_image.field_media_image.yml @@ -1,9 +1,9 @@ -uuid: 8d47feb9-a11f-41dc-a8d6-fe4b5e052bb5 +uuid: 2cb4f9dd-bea2-4bdc-af37-82440afe4154 langcode: en status: true dependencies: config: - - field.storage.media.field_media_image_1 + - field.storage.media.field_media_image - media.type.banner_image module: - custom_add_another @@ -12,8 +12,8 @@ third_party_settings: custom_add_another: custom_add_another: '' custom_remove: '' -id: media.banner_image.field_media_image_1 -field_name: field_media_image_1 +id: media.banner_image.field_media_image +field_name: field_media_image entity_type: media bundle: banner_image label: Image diff --git a/services/drupal/config/sync/field.field.paragraph.banner_slide.field_banner_image.yml b/services/drupal/config/sync/field.field.paragraph.banner_slide.field_banner_image.yml index 6d854900c1..58005b824a 100644 --- a/services/drupal/config/sync/field.field.paragraph.banner_slide.field_banner_image.yml +++ b/services/drupal/config/sync/field.field.paragraph.banner_slide.field_banner_image.yml @@ -1,4 +1,4 @@ -uuid: 1caceda3-2a8c-484c-905e-c1d0ebdafc68 +uuid: 7f728643-5b0f-4e27-a215-951606045e2a langcode: en status: true dependencies: diff --git a/services/drupal/config/sync/field.field.paragraph.banner_slide.field_image.yml b/services/drupal/config/sync/field.field.paragraph.banner_slide.field_image.yml index 918fb90a79..dc16ed4eb8 100644 --- a/services/drupal/config/sync/field.field.paragraph.banner_slide.field_image.yml +++ b/services/drupal/config/sync/field.field.paragraph.banner_slide.field_image.yml @@ -18,7 +18,7 @@ entity_type: paragraph bundle: banner_slide label: Image description: '' -required: true +required: false translatable: false default_value: { } default_value_callback: '' diff --git a/services/drupal/config/sync/field.storage.media.field_media_image_1.yml b/services/drupal/config/sync/field.storage.media.field_media_image_1.yml deleted file mode 100644 index 060ff28053..0000000000 --- a/services/drupal/config/sync/field.storage.media.field_media_image_1.yml +++ /dev/null @@ -1,30 +0,0 @@ -uuid: d4001383-a789-475e-8f51-4928b14389d8 -langcode: en -status: true -dependencies: - module: - - file - - image - - media -id: media.field_media_image_1 -field_name: field_media_image_1 -entity_type: media -type: image -settings: - target_type: file - display_field: false - display_default: false - uri_scheme: public - default_image: - uuid: null - alt: '' - title: '' - width: null - height: null -module: image -locked: false -cardinality: 1 -translatable: true -indexes: { } -persist_with_no_fields: false -custom_storage: false diff --git a/services/drupal/config/sync/field.storage.paragraph.field_banner_image.yml b/services/drupal/config/sync/field.storage.paragraph.field_banner_image.yml index b0c18b1363..5962e7f799 100644 --- a/services/drupal/config/sync/field.storage.paragraph.field_banner_image.yml +++ b/services/drupal/config/sync/field.storage.paragraph.field_banner_image.yml @@ -1,4 +1,4 @@ -uuid: 291ccb04-8815-47ca-905c-54790a3ba042 +uuid: f1c7752d-e645-4724-a8c1-ba3ba13fd05b langcode: en status: true dependencies: diff --git a/services/drupal/config/sync/group.content_type.group_content_type_1ea3403e68c48.yml b/services/drupal/config/sync/group.content_type.group_content_type_1ea3403e68c48.yml index 161e3cb575..3bdb7c2828 100644 --- a/services/drupal/config/sync/group.content_type.group_content_type_1ea3403e68c48.yml +++ b/services/drupal/config/sync/group.content_type.group_content_type_1ea3403e68c48.yml @@ -1,4 +1,4 @@ -uuid: 63c8aca5-6162-46ea-9bec-9b52041cb11c +uuid: e5f0bc3a-921f-4bd2-98c5-63c68870893c langcode: en status: true dependencies: diff --git a/services/drupal/config/sync/language.content_settings.media.banner_image.yml b/services/drupal/config/sync/language.content_settings.media.banner_image.yml index 666f19bcd1..5d8c065763 100644 --- a/services/drupal/config/sync/language.content_settings.media.banner_image.yml +++ b/services/drupal/config/sync/language.content_settings.media.banner_image.yml @@ -1,4 +1,4 @@ -uuid: ff296045-7f8d-4420-a09d-b543e6c01b90 +uuid: 48ed15ff-43dd-448f-ba02-5d484c6f6353 langcode: en status: true dependencies: diff --git a/services/drupal/config/sync/media.type.banner_image.yml b/services/drupal/config/sync/media.type.banner_image.yml index 3cac01f5cf..a18ed00d6f 100644 --- a/services/drupal/config/sync/media.type.banner_image.yml +++ b/services/drupal/config/sync/media.type.banner_image.yml @@ -1,13 +1,14 @@ -uuid: 00273d6d-8cda-4472-ac35-d85560b5e729 +uuid: 20cadc07-237e-4e60-99b5-597d20dfe762 langcode: en status: true dependencies: { } id: banner_image label: 'Banner Image' -description: '' +description: 'Banner image to be used with Hero Banners' source: image queue_thumbnail_downloads: false new_revision: false source_configuration: - source_field: field_media_image_1 -field_map: { } + source_field: field_media_image +field_map: + name: name diff --git a/services/drupal/config/sync/rabbit_hole.behavior_settings.media_type_banner_image.yml b/services/drupal/config/sync/rabbit_hole.behavior_settings.media_type_banner_image.yml index 2ae5c79ed3..efa191b48f 100644 --- a/services/drupal/config/sync/rabbit_hole.behavior_settings.media_type_banner_image.yml +++ b/services/drupal/config/sync/rabbit_hole.behavior_settings.media_type_banner_image.yml @@ -1,4 +1,4 @@ -uuid: b6479696-b1b5-4f5a-a91d-10d15c3c30e8 +uuid: 2c0a965f-b5ce-43f9-8a23-ed8e95ec7f6e langcode: en status: true dependencies: diff --git a/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--banner-slide.html.twig b/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--banner-slide.html.twig index e22c13a57b..2000337965 100644 --- a/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--banner-slide.html.twig +++ b/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--banner-slide.html.twig @@ -5,9 +5,15 @@ */ #} +{% if content.field_banner_image|field_value is not null %} + {% set background_image = file_url(content.field_banner_image|field_target_entity.field_media_image.entity.uri.value) %} +{% else %} + {% set background_image = content.field_image|field_value|render %} +{% endif %} + {% include '@components/hero/hero--slideshow/hero--slideshow.twig' with { modifier_classes: 'usa-hero--reversed', - background_image: content.field_image|field_value|render, + background_image: background_image, title_element: 'h2', title: content.field_title|field_value|render, content: content.field_text|field_value|render, From a959e9faaa81a924da87d3e33b537961c685fc74 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Fri, 23 Sep 2022 13:04:45 -0400 Subject: [PATCH 08/59] Ensure we can run the composer merge plugin --- services/drupal/composer.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/services/drupal/composer.json b/services/drupal/composer.json index 927b8d1335..4a5f44018e 100644 --- a/services/drupal/composer.json +++ b/services/drupal/composer.json @@ -370,7 +370,8 @@ "cweagans/composer-patches": true, "drupal/core-composer-scaffold": true, "zaporylie/composer-drupal-optimizations": true, - "dealerdirect/phpcodesniffer-composer-installer": true + "dealerdirect/phpcodesniffer-composer-installer": true, + "wikimedia/composer-merge-plugin": true } }, "autoload": { From 4d3e01ee109ffdefb3790a642e866eb033f002f0 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Fri, 23 Sep 2022 13:25:26 -0400 Subject: [PATCH 09/59] EPAD8-1717 disable gin-related helper modules --- services/drupal/config/sync/core.extension.yml | 2 -- services/drupal/config/sync/gin_lb.settings.yml | 4 ---- 2 files changed, 6 deletions(-) delete mode 100644 services/drupal/config/sync/gin_lb.settings.yml diff --git a/services/drupal/config/sync/core.extension.yml b/services/drupal/config/sync/core.extension.yml index f7d9376114..7cd47cc761 100644 --- a/services/drupal/config/sync/core.extension.yml +++ b/services/drupal/config/sync/core.extension.yml @@ -96,8 +96,6 @@ module: focal_point: 0 gcontent_moderation: 0 gesso_helper: 0 - gin_lb: 0 - gin_toolbar: 0 gmedia: 0 gnode: 0 group: 0 diff --git a/services/drupal/config/sync/gin_lb.settings.yml b/services/drupal/config/sync/gin_lb.settings.yml deleted file mode 100644 index 098a897c4b..0000000000 --- a/services/drupal/config/sync/gin_lb.settings.yml +++ /dev/null @@ -1,4 +0,0 @@ -_core: - default_config_hash: JwHy7mL25SLjSzNTOkFsf3M9xID52Dh7GMlqwLCY5Ro -toastify_cdn: 1 -enable_preview_regions: 0 From 3f188bce47892999d27096c6f05791e8cd437c23 Mon Sep 17 00:00:00 2001 From: Patrick Hangauer Date: Fri, 23 Sep 2022 16:51:17 -0500 Subject: [PATCH 10/59] [EPAD8-1681] - WIP updating queries and working on deploy hook --- .../custom/epa_core/epa_core.deploy.php | 156 +++++++++++++----- .../modules/custom/epa_core/epa_core.module | 70 ++++++++ 2 files changed, 187 insertions(+), 39 deletions(-) diff --git a/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php b/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php index f390c143f6..3a3129c742 100644 --- a/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php +++ b/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php @@ -1,5 +1,6 @@ query( - 'SELECT tid FROM taxonomy_term_field_data - WHERE description__value IS NULL OR - description__value = :value OR - description__value REGEXP :regex', [':value' => 'This page shows all of the pages at epa.gov that are tagged with [term:name] at this time.', ':regex' => '^

This page shows all of the pages at epa\\.gov that are tagged with \\[term:name\\] at this time\\.<\\/p>[[:space:]]*$']) - ->fetchCol(); +//function epa_core_deploy_0001_update_term_descriptions(&$sandbox) { +// $text = 'This page shows all of the pages at epa.gov that are tagged with \[term:name\] at this time.'; +// if (!isset($sandbox['total'])) { +// // Query all terms that don't have a description set. +// $result = \Drupal::database()->query( +// 'SELECT tid FROM taxonomy_term_field_data +// WHERE description__value IS NULL OR +// description__value = :value OR +// description__value REGEXP :regex', [':value' => 'This page shows all of the pages at epa.gov that are tagged with [term:name] at this time.', ':regex' => '^

This page shows all of the pages at epa\\.gov that are tagged with \\[term:name\\] at this time\\.<\\/p>[[:space:]]*$']) +// ->fetchCol(); +// +// $sandbox['total'] = count($result); +// $sandbox['current'] = 0; +// +// \Drupal::logger('epa_core')->notice($sandbox['total'] . ' terms with outdated descriptions.'); +// } +// +// // Query 500 at a time for batch. +// $tids = \Drupal::database()->query( +// 'SELECT tid FROM taxonomy_term_field_data +// WHERE description__value IS NULL OR +// description__value = :value OR +// description__value REGEXP :regex +// LIMIT 500;', [':value' => 'This page shows all of the pages at epa.gov that are tagged with [term:name] at this time.', ':regex' => '^

This page shows all of the pages at epa\\.gov that are tagged with \\[term:name\\] at this time\\.<\\/p>[[:space:]]*$']) +// ->fetchCol(); +// +// if (empty($tids)) { +// $sandbox['#finished'] = 1; +// return; +// } +// +// $terms = \Drupal::entityTypeManager() +// ->getStorage('taxonomy_term') +// ->loadMultiple($tids); +// +// foreach ($terms as $term) { +// $term->set('description', ['value' => '[term:term-description]', 'format' => 'filtered_html']); +// $term->save(); +// $sandbox['current']++; +// } +// +// \Drupal::logger('epa_core')->notice($sandbox['current'] . ' terms descriptions updated.'); +// +// if ($sandbox['current'] >= $sandbox['total']) { +// $sandbox['#finished'] = 1; +// } else { +// $sandbox['#finished'] = ($sandbox['current'] / $sandbox['total']); +// } +//} - $sandbox['total'] = count($result); - $sandbox['current'] = 0; +/** + * + */ +function epa_core_deploy_0001_test_update_banner_slide_images(&$sandbox) { + + $prefixes = ['paragraph_revision', 'paragraph']; + + $sandbox['current'] = 0; + + foreach ($prefixes as $prefix) { + + $revision_files = \Drupal::database()->query( + 'SELECT fi.field_image_target_id, fi.field_image_alt, fm.filename, fm.langcode, fi.entity_id, fi.revision_id + FROM ' . $prefix . '__field_image AS fi + LEFT JOIN file_managed AS fm ON fm.fid = fi.field_image_target_id + LEFT JOIN ' . $prefix . '__field_banner_image AS fb ON fi.revision_id = fb.revision_id + WHERE fb.revision_id IS NULL + AND fi.bundle = :value + LIMIT 500;', [':value' => 'banner_slide']) + ->fetchAll(); + + foreach ($revision_files as $file) { + $banner_media = \Drupal::database()->query( + 'SELECT entity_id + FROM media__field_media_image + WHERE field_media_image_target_id = ' . $file->field_image_target_id . ' + AND bundle = :value;', [':value' => 'banner_image']) + ->fetchCol(); - \Drupal::logger('epa_core')->notice($sandbox['total'] . ' terms with outdated descriptions.'); + if (empty($banner_media)) { + $image_media = Media::create([ + 'bundle' => 'banner_image', + 'uid' => \Drupal::currentUser()->id(), + 'langcode' => \Drupal::languageManager()->getDefaultLanguage()->getId(), + 'field_media_image' => [ + 'target_id' => $file->field_image_target_id, + 'alt' => $file->field_image_alt, + 'title' => $file->filename, + ], + ]); + $image_media->save(); + $langcode = $image_media->language()->getId(); + $banner_image_target_id = $image_media->id(); + } else { + $banner_image_target_id = $banner_media[0]; + $langcode = $file->langcode; + if (empty($langcode)) { + $langcode = \Drupal::languageManager()->getDefaultLanguage()->getId(); + } + } + $connection = \Drupal::service('database'); + $result = $connection->insert($prefix . '__field_banner_image') + ->fields([ + 'bundle' => 'banner_slide', + 'deleted' => 0, + 'entity_id' => $file->entity_id, + 'revision_id' => $file->revision_id, + 'langcode' => $langcode, + 'delta' => 0, + 'field_banner_image_target_id' => $banner_image_target_id + ]) + ->execute(); + $sandbox['current']++; + } + $image_files = count($revision_files) . ' files in ' . $prefix); + dump($i . ' images in ' . $prefix . ' updated'); } - // Query 500 at a time for batch. - $tids = \Drupal::database()->query( - 'SELECT tid FROM taxonomy_term_field_data - WHERE description__value IS NULL OR - description__value = :value OR - description__value REGEXP :regex - LIMIT 500;', [':value' => 'This page shows all of the pages at epa.gov that are tagged with [term:name] at this time.', ':regex' => '^

This page shows all of the pages at epa\\.gov that are tagged with \\[term:name\\] at this time\\.<\\/p>[[:space:]]*$']) - ->fetchCol(); - - if (empty($tids)) { + if (empty($revision_files)) { $sandbox['#finished'] = 1; return; } - $terms = \Drupal::entityTypeManager() - ->getStorage('taxonomy_term') - ->loadMultiple($tids); + \Drupal::logger('epa_core')->notice($sandbox['current'] . ' images updated.'); - foreach ($terms as $term) { - $term->set('description', ['value' => '[term:term-description]', 'format' => 'filtered_html']); - $term->save(); - $sandbox['current']++; - } - - \Drupal::logger('epa_core')->notice($sandbox['current'] . ' terms descriptions updated.'); - - if ($sandbox['current'] >= $sandbox['total']) { - $sandbox['#finished'] = 1; - } else { - $sandbox['#finished'] = ($sandbox['current'] / $sandbox['total']); - } } diff --git a/services/drupal/web/modules/custom/epa_core/epa_core.module b/services/drupal/web/modules/custom/epa_core/epa_core.module index d675726ff1..06b72adeb6 100644 --- a/services/drupal/web/modules/custom/epa_core/epa_core.module +++ b/services/drupal/web/modules/custom/epa_core/epa_core.module @@ -19,6 +19,7 @@ use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Field\FieldFilteredMarkup; use Drupal\Core\Render\BubbleableMetadata; use Drupal\Core\StringTranslation\TranslatableMarkup; +use Drupal\media\Entity\Media; use Drupal\node\NodeInterface; use Drupal\Core\Cache\CacheableMetadata; use Drupal\Core\Cache\RefinableCacheableDependencyInterface; @@ -724,3 +725,72 @@ function epa_core_entity_field_access($operation, \Drupal\Core\Field\FieldDefini } return AccessResult::neutral(); } + +function epa_core_user_view() { + $prefixes = ['paragraph_revision', 'paragraph']; + $i = 0; + foreach ($prefixes as $prefix) { + + $revision_files = \Drupal::database()->query( + 'SELECT fi.field_image_target_id, fi.field_image_alt, fm.filename, fm.langcode, fi.entity_id, fi.revision_id + FROM ' . $prefix . '__field_image AS fi + LEFT JOIN file_managed AS fm ON fm.fid = fi.field_image_target_id + LEFT JOIN ' . $prefix . '__field_banner_image AS fb ON fi.revision_id = fb.revision_id + WHERE fb.revision_id IS NULL + AND fi.bundle = :value + LIMIT 410, 10;', [':value' => 'banner_slide']) + ->fetchAll(); + + foreach ($revision_files as $file) { + $banner_media = \Drupal::database()->query( + 'SELECT entity_id + FROM media__field_media_image + WHERE field_media_image_target_id = ' . $file->field_image_target_id . ' + AND bundle = :value;', [':value' => 'banner_image']) + ->fetchCol(); + + if (empty($banner_media)) { + $image_media = Media::create([ + 'bundle' => 'banner_image', + 'uid' => \Drupal::currentUser()->id(), + 'langcode' => \Drupal::languageManager()->getDefaultLanguage()->getId(), + 'field_media_image' => [ + 'target_id' => $file->field_image_target_id, + 'alt' => $file->field_image_alt, + 'title' => $file->filename, + ], + ]); + $image_media->save(); + $langcode = $image_media->language()->getId(); + $banner_image_target_id = $image_media->id(); + } else { + $banner_image_target_id = $banner_media[0]; + $langcode = $file->langcode; + if (empty($langcode)) { + $langcode = \Drupal::languageManager()->getDefaultLanguage()->getId(); + } + } + $connection = \Drupal::service('database'); + $result = $connection->insert($prefix . '__field_banner_image') + ->fields([ + 'bundle' => 'banner_slide', + 'deleted' => 0, + 'entity_id' => $file->entity_id, + 'revision_id' => $file->revision_id, + 'langcode' => $langcode, + 'delta' => 0, + 'field_banner_image_target_id' => $banner_image_target_id + ]) + ->execute(); + $i++; + } + $batch_files = $revision_files.length; + dump($batch_files); +// dump($revision_files); +// dump(count($revision_files) . ' files in ' . $prefix); +// dump($i . ' images in ' . $prefix . ' updated'); + } + $total_files = $batch_files; + dump($total_files); + +} From 33e8beb1799a6f7a7c434a047c9c43891c8c3f57 Mon Sep 17 00:00:00 2001 From: Patrick Hangauer Date: Tue, 27 Sep 2022 16:31:33 -0500 Subject: [PATCH 11/59] [EPAD8-1681] - code cleanup and final revisions, config changes to hide old image field from the form display and show the banner image as a thumbnail --- ...display.paragraph.banner_slide.default.yml | 15 +- ...iew_display.media.banner_image.default.yml | 8 +- ...display.paragraph.banner_slide.default.yml | 2 +- .../custom/epa_core/epa_core.deploy.php | 142 ++++++++++-------- .../modules/custom/epa_core/epa_core.module | 69 --------- 5 files changed, 91 insertions(+), 145 deletions(-) diff --git a/services/drupal/config/sync/core.entity_form_display.paragraph.banner_slide.default.yml b/services/drupal/config/sync/core.entity_form_display.paragraph.banner_slide.default.yml index b58ef26ef1..f0949676dd 100644 --- a/services/drupal/config/sync/core.entity_form_display.paragraph.banner_slide.default.yml +++ b/services/drupal/config/sync/core.entity_form_display.paragraph.banner_slide.default.yml @@ -7,10 +7,8 @@ dependencies: - field.field.paragraph.banner_slide.field_image - field.field.paragraph.banner_slide.field_text - field.field.paragraph.banner_slide.field_title - - image.style.thumbnail - paragraphs.paragraphs_type.banner_slide module: - - focal_point - media_library - text id: paragraph.banner_slide.default @@ -20,20 +18,10 @@ mode: default content: field_banner_image: type: media_library_widget - weight: 3 - region: content - settings: - media_types: { } - third_party_settings: { } - field_image: - type: image_focal_point weight: 2 region: content settings: - progress_indicator: throbber - preview_image_style: thumbnail - preview_link: true - offsets: '50,50' + media_types: { } third_party_settings: { } field_text: type: text_textarea @@ -53,4 +41,5 @@ content: third_party_settings: { } hidden: created: true + field_image: true status: true diff --git a/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml b/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml index c7e0586879..54bc7380c1 100644 --- a/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml +++ b/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml @@ -4,10 +4,14 @@ status: true dependencies: config: - field.field.media.banner_image.field_media_image - - image.style.large + - image.style.thumbnail - media.type.banner_image module: + - media_inline_embed - svg_image +third_party_settings: + media_inline_embed: + embed_inline: false id: media.banner_image.default targetEntityType: media bundle: banner_image @@ -18,7 +22,7 @@ content: label: visually_hidden settings: image_link: '' - image_style: large + image_style: thumbnail svg_attributes: width: null height: null diff --git a/services/drupal/config/sync/core.entity_view_display.paragraph.banner_slide.default.yml b/services/drupal/config/sync/core.entity_view_display.paragraph.banner_slide.default.yml index abceab56dc..f0844d4c87 100644 --- a/services/drupal/config/sync/core.entity_view_display.paragraph.banner_slide.default.yml +++ b/services/drupal/config/sync/core.entity_view_display.paragraph.banner_slide.default.yml @@ -19,7 +19,7 @@ mode: default content: field_banner_image: type: entity_reference_entity_view - label: above + label: hidden settings: view_mode: default link: false diff --git a/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php b/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php index 3a3129c742..68d4aa072f 100644 --- a/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php +++ b/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php @@ -51,68 +51,88 @@ function epa_core_deploy_0001_populate_search_text(&$sandbox) { /** * Sets terms with empty description to global term description token. */ -//function epa_core_deploy_0001_update_term_descriptions(&$sandbox) { -// $text = 'This page shows all of the pages at epa.gov that are tagged with \[term:name\] at this time.'; -// if (!isset($sandbox['total'])) { -// // Query all terms that don't have a description set. -// $result = \Drupal::database()->query( -// 'SELECT tid FROM taxonomy_term_field_data -// WHERE description__value IS NULL OR -// description__value = :value OR -// description__value REGEXP :regex', [':value' => 'This page shows all of the pages at epa.gov that are tagged with [term:name] at this time.', ':regex' => '^

This page shows all of the pages at epa\\.gov that are tagged with \\[term:name\\] at this time\\.<\\/p>[[:space:]]*$']) -// ->fetchCol(); -// -// $sandbox['total'] = count($result); -// $sandbox['current'] = 0; -// -// \Drupal::logger('epa_core')->notice($sandbox['total'] . ' terms with outdated descriptions.'); -// } -// -// // Query 500 at a time for batch. -// $tids = \Drupal::database()->query( -// 'SELECT tid FROM taxonomy_term_field_data -// WHERE description__value IS NULL OR -// description__value = :value OR -// description__value REGEXP :regex -// LIMIT 500;', [':value' => 'This page shows all of the pages at epa.gov that are tagged with [term:name] at this time.', ':regex' => '^

This page shows all of the pages at epa\\.gov that are tagged with \\[term:name\\] at this time\\.<\\/p>[[:space:]]*$']) -// ->fetchCol(); -// -// if (empty($tids)) { -// $sandbox['#finished'] = 1; -// return; -// } -// -// $terms = \Drupal::entityTypeManager() -// ->getStorage('taxonomy_term') -// ->loadMultiple($tids); -// -// foreach ($terms as $term) { -// $term->set('description', ['value' => '[term:term-description]', 'format' => 'filtered_html']); -// $term->save(); -// $sandbox['current']++; -// } -// -// \Drupal::logger('epa_core')->notice($sandbox['current'] . ' terms descriptions updated.'); -// -// if ($sandbox['current'] >= $sandbox['total']) { -// $sandbox['#finished'] = 1; -// } else { -// $sandbox['#finished'] = ($sandbox['current'] / $sandbox['total']); -// } -//} +function epa_core_deploy_0001_update_term_descriptions(&$sandbox) { + $text = 'This page shows all of the pages at epa.gov that are tagged with \[term:name\] at this time.'; + if (!isset($sandbox['total'])) { + // Query all terms that don't have a description set. + $result = \Drupal::database()->query( + 'SELECT tid FROM taxonomy_term_field_data + WHERE description__value IS NULL OR + description__value = :value OR + description__value REGEXP :regex', [':value' => 'This page shows all of the pages at epa.gov that are tagged with [term:name] at this time.', ':regex' => '^

This page shows all of the pages at epa\\.gov that are tagged with \\[term:name\\] at this time\\.<\\/p>[[:space:]]*$']) + ->fetchCol(); + + $sandbox['total'] = count($result); + $sandbox['current'] = 0; + + \Drupal::logger('epa_core')->notice($sandbox['total'] . ' terms with outdated descriptions.'); + } + + // Query 500 at a time for batch. + $tids = \Drupal::database()->query( + 'SELECT tid FROM taxonomy_term_field_data + WHERE description__value IS NULL OR + description__value = :value OR + description__value REGEXP :regex + LIMIT 500;', [':value' => 'This page shows all of the pages at epa.gov that are tagged with [term:name] at this time.', ':regex' => '^

This page shows all of the pages at epa\\.gov that are tagged with \\[term:name\\] at this time\\.<\\/p>[[:space:]]*$']) + ->fetchCol(); + + if (empty($tids)) { + $sandbox['#finished'] = 1; + return; + } + + $terms = \Drupal::entityTypeManager() + ->getStorage('taxonomy_term') + ->loadMultiple($tids); + + foreach ($terms as $term) { + $term->set('description', ['value' => '[term:term-description]', 'format' => 'filtered_html']); + $term->save(); + $sandbox['current']++; + } + + \Drupal::logger('epa_core')->notice($sandbox['current'] . ' terms descriptions updated.'); + + if ($sandbox['current'] >= $sandbox['total']) { + $sandbox['#finished'] = 1; + } else { + $sandbox['#finished'] = ($sandbox['current'] / $sandbox['total']); + } +} /** - * + * Moves images on banner slides to banner image field + * and creates banner image entity where necessary. */ -function epa_core_deploy_0001_test_update_banner_slide_images(&$sandbox) { - +function epa_core_deploy_0001_update_banner_slide_images(&$sandbox) { $prefixes = ['paragraph_revision', 'paragraph']; - $sandbox['current'] = 0; + if (!isset($sandbox['total'])) { + $sandbox['total'] = 0; + $sandbox['current'] = 0; + $sandbox['images_created'] = 0; + // Query all images that are being used with banner slides. + foreach ($prefixes as $prefix) { + + $result = \Drupal::database()->query( + 'SELECT fi.field_image_target_id + FROM ' . $prefix . '__field_image AS fi + LEFT JOIN ' . $prefix . '__field_banner_image AS fb ON fi.revision_id = fb.revision_id + WHERE fb.revision_id IS NULL + AND fi.bundle = :value;', [':value' => 'banner_slide']) + ->fetchCol(); + + $sandbox['total'] += count($result); + + } + + \Drupal::logger('epa_core')->notice($sandbox['total'] . ' image files associated with banner slides.'); + } foreach ($prefixes as $prefix) { - $revision_files = \Drupal::database()->query( + $files = \Drupal::database()->query( 'SELECT fi.field_image_target_id, fi.field_image_alt, fm.filename, fm.langcode, fi.entity_id, fi.revision_id FROM ' . $prefix . '__field_image AS fi LEFT JOIN file_managed AS fm ON fm.fid = fi.field_image_target_id @@ -122,7 +142,7 @@ function epa_core_deploy_0001_test_update_banner_slide_images(&$sandbox) { LIMIT 500;', [':value' => 'banner_slide']) ->fetchAll(); - foreach ($revision_files as $file) { + foreach ($files as $file) { $banner_media = \Drupal::database()->query( 'SELECT entity_id FROM media__field_media_image @@ -144,6 +164,7 @@ function epa_core_deploy_0001_test_update_banner_slide_images(&$sandbox) { $image_media->save(); $langcode = $image_media->language()->getId(); $banner_image_target_id = $image_media->id(); + $sandbox['images_created']++; } else { $banner_image_target_id = $banner_media[0]; $langcode = $file->langcode; @@ -165,15 +186,16 @@ function epa_core_deploy_0001_test_update_banner_slide_images(&$sandbox) { ->execute(); $sandbox['current']++; } - $image_files = count($revision_files) . ' files in ' . $prefix); - dump($i . ' images in ' . $prefix . ' updated'); } - if (empty($revision_files)) { + if ($sandbox['current'] >= $sandbox['total']) { $sandbox['#finished'] = 1; - return; + \Drupal::logger('epa_core')->notice('Banner slide image update complete'); + } else { + $sandbox['#finished'] = ($sandbox['current'] / $sandbox['total']); } - \Drupal::logger('epa_core')->notice($sandbox['current'] . ' images updated.'); + \Drupal::logger('epa_core')->notice($sandbox['current'] . ' images processed / ' . $sandbox['images_created'] . ' banner images created.'); } + diff --git a/services/drupal/web/modules/custom/epa_core/epa_core.module b/services/drupal/web/modules/custom/epa_core/epa_core.module index 06b72adeb6..f6e4a5f7bb 100644 --- a/services/drupal/web/modules/custom/epa_core/epa_core.module +++ b/services/drupal/web/modules/custom/epa_core/epa_core.module @@ -725,72 +725,3 @@ function epa_core_entity_field_access($operation, \Drupal\Core\Field\FieldDefini } return AccessResult::neutral(); } - -function epa_core_user_view() { - $prefixes = ['paragraph_revision', 'paragraph']; - $i = 0; - foreach ($prefixes as $prefix) { - - $revision_files = \Drupal::database()->query( - 'SELECT fi.field_image_target_id, fi.field_image_alt, fm.filename, fm.langcode, fi.entity_id, fi.revision_id - FROM ' . $prefix . '__field_image AS fi - LEFT JOIN file_managed AS fm ON fm.fid = fi.field_image_target_id - LEFT JOIN ' . $prefix . '__field_banner_image AS fb ON fi.revision_id = fb.revision_id - WHERE fb.revision_id IS NULL - AND fi.bundle = :value - LIMIT 410, 10;', [':value' => 'banner_slide']) - ->fetchAll(); - - foreach ($revision_files as $file) { - $banner_media = \Drupal::database()->query( - 'SELECT entity_id - FROM media__field_media_image - WHERE field_media_image_target_id = ' . $file->field_image_target_id . ' - AND bundle = :value;', [':value' => 'banner_image']) - ->fetchCol(); - - if (empty($banner_media)) { - $image_media = Media::create([ - 'bundle' => 'banner_image', - 'uid' => \Drupal::currentUser()->id(), - 'langcode' => \Drupal::languageManager()->getDefaultLanguage()->getId(), - 'field_media_image' => [ - 'target_id' => $file->field_image_target_id, - 'alt' => $file->field_image_alt, - 'title' => $file->filename, - ], - ]); - $image_media->save(); - $langcode = $image_media->language()->getId(); - $banner_image_target_id = $image_media->id(); - } else { - $banner_image_target_id = $banner_media[0]; - $langcode = $file->langcode; - if (empty($langcode)) { - $langcode = \Drupal::languageManager()->getDefaultLanguage()->getId(); - } - } - $connection = \Drupal::service('database'); - $result = $connection->insert($prefix . '__field_banner_image') - ->fields([ - 'bundle' => 'banner_slide', - 'deleted' => 0, - 'entity_id' => $file->entity_id, - 'revision_id' => $file->revision_id, - 'langcode' => $langcode, - 'delta' => 0, - 'field_banner_image_target_id' => $banner_image_target_id - ]) - ->execute(); - $i++; - } - $batch_files = $revision_files.length; - dump($batch_files); -// dump($revision_files); -// dump(count($revision_files) . ' files in ' . $prefix); -// dump($i . ' images in ' . $prefix . ' updated'); - } - $total_files = $batch_files; - dump($total_files); - -} From c8e11b432227d351308042576c6e926c6edd10cb Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Wed, 28 Sep 2022 18:08:31 -0400 Subject: [PATCH 12/59] EPAD8-1681 use correct image style for banner images --- ...display.paragraph.banner_slide.default.yml | 7 +- .../EpaMediaThumbnailUrlFormatter.php | 108 ++++++++++++++++++ .../paragraph--banner-slide.html.twig | 2 +- 3 files changed, 113 insertions(+), 4 deletions(-) create mode 100644 services/drupal/web/modules/custom/epa_media/src/Plugin/Field/FieldFormatter/EpaMediaThumbnailUrlFormatter.php diff --git a/services/drupal/config/sync/core.entity_view_display.paragraph.banner_slide.default.yml b/services/drupal/config/sync/core.entity_view_display.paragraph.banner_slide.default.yml index f0844d4c87..9907d6cafa 100644 --- a/services/drupal/config/sync/core.entity_view_display.paragraph.banner_slide.default.yml +++ b/services/drupal/config/sync/core.entity_view_display.paragraph.banner_slide.default.yml @@ -10,6 +10,7 @@ dependencies: - image.style.hero - paragraphs.paragraphs_type.banner_slide module: + - epa_media - svg_image - text id: paragraph.banner_slide.default @@ -18,11 +19,11 @@ bundle: banner_slide mode: default content: field_banner_image: - type: entity_reference_entity_view + type: epa_media_thumbnail_url label: hidden settings: - view_mode: default - link: false + image_style: hero + image_link: '' third_party_settings: { } weight: 3 region: content diff --git a/services/drupal/web/modules/custom/epa_media/src/Plugin/Field/FieldFormatter/EpaMediaThumbnailUrlFormatter.php b/services/drupal/web/modules/custom/epa_media/src/Plugin/Field/FieldFormatter/EpaMediaThumbnailUrlFormatter.php new file mode 100644 index 0000000000..e236092f56 --- /dev/null +++ b/services/drupal/web/modules/custom/epa_media/src/Plugin/Field/FieldFormatter/EpaMediaThumbnailUrlFormatter.php @@ -0,0 +1,108 @@ +imageStyleStorage = $image_style_storage; + } + + + + /** + * {@inheritdoc} + */ + public function settingsForm(array $form, FormStateInterface $form_state) { + $element = parent::settingsForm($form, $form_state); + + unset($element['image_link']); + + return $element; + } + + /** + * {@inheritdoc} + */ + public function viewElements(FieldItemListInterface $items, $langcode) { + $elements = []; + $media_items = $this->getEntitiesToView($items, $langcode); + + // Early opt-out if the field is empty. + if (empty($media_items)) { + return $elements; + } + + /** @var \Drupal\image\ImageStyleInterface $image_style */ + $image_style = $this->imageStyleStorage->load($this->getSetting('image_style')); + /** @var \Drupal\Core\File\FileUrlGeneratorInterface $file_url_generator */ + $file_url_generator = \Drupal::service('file_url_generator'); + /** @var \Drupal\media\MediaInterface[] $media_items */ + foreach ($media_items as $delta => $media) { + $image_uri = $media->get('thumbnail')->entity->getFileUri(); + $url = $image_style ? $file_url_generator->transformRelative($image_style->buildUrl($image_uri)) : $file_url_generator->generateString($image_uri); + + // Add cacheability metadata from the image and image style. + $cacheability = CacheableMetadata::createFromObject($media); + if ($image_style) { + $cacheability->addCacheableDependency(CacheableMetadata::createFromObject($image_style)); + } + + $elements[$delta] = ['#markup' => $url]; + $cacheability->applyTo($elements[$delta]); + } + return $elements; + } +} diff --git a/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--banner-slide.html.twig b/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--banner-slide.html.twig index 2000337965..5961329074 100644 --- a/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--banner-slide.html.twig +++ b/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--banner-slide.html.twig @@ -6,7 +6,7 @@ #} {% if content.field_banner_image|field_value is not null %} - {% set background_image = file_url(content.field_banner_image|field_target_entity.field_media_image.entity.uri.value) %} + {% set background_image = content.field_banner_image|field_value|render %} {% else %} {% set background_image = content.field_image|field_value|render %} {% endif %} From 2e4486258f16a4a023c94acd30d65ae59a82dae1 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Tue, 11 Oct 2022 10:02:06 -0400 Subject: [PATCH 13/59] EPAD8-1681 ensure banner images can only be added to a single group --- .../group.content_type.group_content_type_1ea3403e68c48.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/drupal/config/sync/group.content_type.group_content_type_1ea3403e68c48.yml b/services/drupal/config/sync/group.content_type.group_content_type_1ea3403e68c48.yml index 3bdb7c2828..c0f76fc72a 100644 --- a/services/drupal/config/sync/group.content_type.group_content_type_1ea3403e68c48.yml +++ b/services/drupal/config/sync/group.content_type.group_content_type_1ea3403e68c48.yml @@ -14,6 +14,6 @@ description: 'Adds Banner Image content to groups b group_type: web_area content_plugin: 'group_media:banner_image' plugin_config: - group_cardinality: 0 + group_cardinality: 1 entity_cardinality: 1 use_creation_wizard: false From 14615c6694d35bfe2cf428d954fd46170f610e16 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Tue, 11 Oct 2022 10:10:50 -0400 Subject: [PATCH 14/59] EPAD8-1681 updating permissions for new Banner image media --- .../drupal/config/sync/group.role.web_area-30cda0a61.yml | 7 +++++++ .../drupal/config/sync/group.role.web_area-a1df8f829.yml | 7 +++++++ .../drupal/config/sync/group.role.web_area-a416e6833.yml | 7 +++++++ .../config/sync/group.role.web_area-administrator.yml | 7 +++++++ .../drupal/config/sync/group.role.web_area-anonymous.yml | 1 + .../drupal/config/sync/group.role.web_area-approver.yml | 6 ++++++ services/drupal/config/sync/group.role.web_area-editor.yml | 6 ++++++ services/drupal/config/sync/group.role.web_area-member.yml | 7 +++++++ .../drupal/config/sync/group.role.web_area-outsider.yml | 1 + 9 files changed, 49 insertions(+) diff --git a/services/drupal/config/sync/group.role.web_area-30cda0a61.yml b/services/drupal/config/sync/group.role.web_area-30cda0a61.yml index 3d44cea173..148be3bf80 100644 --- a/services/drupal/config/sync/group.role.web_area-30cda0a61.yml +++ b/services/drupal/config/sync/group.role.web_area-30cda0a61.yml @@ -20,6 +20,7 @@ permissions: - 'access group_menu overview' - 'access group_node overview' - 'create group_media:audio entity' + - 'create group_media:banner_image entity' - 'create group_media:document entity' - 'create group_media:image entity' - 'create group_media:other entity' @@ -33,6 +34,7 @@ permissions: - 'create group_node:regulation entity' - 'create group_node:webform entity' - 'delete any group_media:audio entity' + - 'delete any group_media:banner_image entity' - 'delete any group_media:document entity' - 'delete any group_media:image entity' - 'delete any group_media:other entity' @@ -54,6 +56,7 @@ permissions: - 'delete any group_node:webform content' - 'delete any group_node:webform entity' - 'delete own group_media:audio entity' + - 'delete own group_media:banner_image entity' - 'delete own group_media:document entity' - 'delete own group_media:image entity' - 'delete own group_media:other entity' @@ -76,6 +79,7 @@ permissions: - 'delete own group_node:webform entity' - 'manage group_content_menu' - 'update any group_media:audio entity' + - 'update any group_media:banner_image entity' - 'update any group_media:document entity' - 'update any group_media:image entity' - 'update any group_media:other entity' @@ -99,6 +103,7 @@ permissions: - 'update any group_node:webform entity' - 'update group_menu:menu entity' - 'update own group_media:audio entity' + - 'update own group_media:banner_image entity' - 'update own group_media:document entity' - 'update own group_media:image entity' - 'update own group_media:other entity' @@ -122,6 +127,7 @@ permissions: - 'update own group_node:webform entity' - 'view group' - 'view group_media:audio entity' + - 'view group_media:banner_image entity' - 'view group_media:document entity' - 'view group_media:image entity' - 'view group_media:other entity' @@ -137,6 +143,7 @@ permissions: - 'view group_node:web_area entity' - 'view group_node:webform entity' - 'view unpublished group_media:audio entity' + - 'view unpublished group_media:banner_image entity' - 'view unpublished group_media:document entity' - 'view unpublished group_media:image entity' - 'view unpublished group_media:other entity' diff --git a/services/drupal/config/sync/group.role.web_area-a1df8f829.yml b/services/drupal/config/sync/group.role.web_area-a1df8f829.yml index 4c7a2560a6..bb8b51e2b1 100644 --- a/services/drupal/config/sync/group.role.web_area-a1df8f829.yml +++ b/services/drupal/config/sync/group.role.web_area-a1df8f829.yml @@ -21,6 +21,7 @@ permissions: - 'access group_node overview' - 'administer members' - 'create group_media:audio entity' + - 'create group_media:banner_image entity' - 'create group_media:document entity' - 'create group_media:image entity' - 'create group_media:other entity' @@ -35,6 +36,7 @@ permissions: - 'create group_node:webform entity' - 'delete any group_media:audio content' - 'delete any group_media:audio entity' + - 'delete any group_media:banner_image entity' - 'delete any group_media:document entity' - 'delete any group_media:image entity' - 'delete any group_media:other entity' @@ -58,6 +60,7 @@ permissions: - 'delete group' - 'delete own group_media:audio content' - 'delete own group_media:audio entity' + - 'delete own group_media:banner_image entity' - 'delete own group_media:document entity' - 'delete own group_media:image entity' - 'delete own group_media:other entity' @@ -83,6 +86,7 @@ permissions: - 'manage group_content_menu' - 'update any group_media:audio content' - 'update any group_media:audio entity' + - 'update any group_media:banner_image entity' - 'update any group_media:document entity' - 'update any group_media:image entity' - 'update any group_media:other entity' @@ -107,6 +111,7 @@ permissions: - 'update group_menu:menu entity' - 'update own group_media:audio content' - 'update own group_media:audio entity' + - 'update own group_media:banner_image entity' - 'update own group_media:document entity' - 'update own group_media:image entity' - 'update own group_media:other entity' @@ -132,6 +137,7 @@ permissions: - 'view group webform submissions' - 'view group_media:audio content' - 'view group_media:audio entity' + - 'view group_media:banner_image entity' - 'view group_media:document content' - 'view group_media:document entity' - 'view group_media:image content' @@ -160,6 +166,7 @@ permissions: - 'view group_node:webform content' - 'view group_node:webform entity' - 'view unpublished group_media:audio entity' + - 'view unpublished group_media:banner_image entity' - 'view unpublished group_media:document entity' - 'view unpublished group_media:image entity' - 'view unpublished group_media:other entity' diff --git a/services/drupal/config/sync/group.role.web_area-a416e6833.yml b/services/drupal/config/sync/group.role.web_area-a416e6833.yml index 96de7bf326..57776a0f4b 100644 --- a/services/drupal/config/sync/group.role.web_area-a416e6833.yml +++ b/services/drupal/config/sync/group.role.web_area-a416e6833.yml @@ -23,6 +23,7 @@ permissions: - 'administer group' - 'administer members' - 'create group_media:audio entity' + - 'create group_media:banner_image entity' - 'create group_media:document entity' - 'create group_media:image entity' - 'create group_media:other entity' @@ -38,6 +39,7 @@ permissions: - 'create group_node:webform entity' - 'delete any group_media:audio content' - 'delete any group_media:audio entity' + - 'delete any group_media:banner_image entity' - 'delete any group_media:document entity' - 'delete any group_media:image entity' - 'delete any group_media:other entity' @@ -63,6 +65,7 @@ permissions: - 'delete group' - 'delete own group_media:audio content' - 'delete own group_media:audio entity' + - 'delete own group_media:banner_image entity' - 'delete own group_media:document entity' - 'delete own group_media:image entity' - 'delete own group_media:other entity' @@ -91,6 +94,7 @@ permissions: - 'manage group_content_menu menu items' - 'update any group_media:audio content' - 'update any group_media:audio entity' + - 'update any group_media:banner_image entity' - 'update any group_media:document entity' - 'update any group_media:image entity' - 'update any group_media:other entity' @@ -116,6 +120,7 @@ permissions: - 'update group_menu:menu entity' - 'update own group_media:audio content' - 'update own group_media:audio entity' + - 'update own group_media:banner_image entity' - 'update own group_media:document entity' - 'update own group_media:image entity' - 'update own group_media:other entity' @@ -142,6 +147,7 @@ permissions: - 'view group webform submissions' - 'view group_media:audio content' - 'view group_media:audio entity' + - 'view group_media:banner_image entity' - 'view group_media:document content' - 'view group_media:document entity' - 'view group_media:image content' @@ -171,6 +177,7 @@ permissions: - 'view group_node:webform content' - 'view group_node:webform entity' - 'view unpublished group_media:audio entity' + - 'view unpublished group_media:banner_image entity' - 'view unpublished group_media:document entity' - 'view unpublished group_media:image entity' - 'view unpublished group_media:other entity' diff --git a/services/drupal/config/sync/group.role.web_area-administrator.yml b/services/drupal/config/sync/group.role.web_area-administrator.yml index 325ad167f0..32f4daafcf 100644 --- a/services/drupal/config/sync/group.role.web_area-administrator.yml +++ b/services/drupal/config/sync/group.role.web_area-administrator.yml @@ -18,6 +18,7 @@ permissions: - 'access group_node overview' - 'administer members' - 'create group_media:audio entity' + - 'create group_media:banner_image entity' - 'create group_media:document entity' - 'create group_media:image entity' - 'create group_media:other entity' @@ -31,6 +32,7 @@ permissions: - 'create group_node:regulation entity' - 'create group_node:webform entity' - 'delete any group_media:audio entity' + - 'delete any group_media:banner_image entity' - 'delete any group_media:document entity' - 'delete any group_media:image entity' - 'delete any group_media:other entity' @@ -52,6 +54,7 @@ permissions: - 'delete any group_node:webform content' - 'delete any group_node:webform entity' - 'delete own group_media:audio entity' + - 'delete own group_media:banner_image entity' - 'delete own group_media:document entity' - 'delete own group_media:image entity' - 'delete own group_media:other entity' @@ -75,6 +78,7 @@ permissions: - 'manage group_content_menu' - 'manage group_content_menu menu items' - 'update any group_media:audio entity' + - 'update any group_media:banner_image entity' - 'update any group_media:document entity' - 'update any group_media:image entity' - 'update any group_media:other entity' @@ -98,6 +102,7 @@ permissions: - 'update any group_node:webform entity' - 'update group_menu:menu entity' - 'update own group_media:audio entity' + - 'update own group_media:banner_image entity' - 'update own group_media:document entity' - 'update own group_media:image entity' - 'update own group_media:other entity' @@ -133,6 +138,7 @@ permissions: - 'view group' - 'view group webform submissions' - 'view group_media:audio entity' + - 'view group_media:banner_image entity' - 'view group_media:document entity' - 'view group_media:image entity' - 'view group_media:other entity' @@ -158,6 +164,7 @@ permissions: - 'view latest version for group_node:web_area' - 'view latest version for group_node:webform' - 'view unpublished group_media:audio entity' + - 'view unpublished group_media:banner_image entity' - 'view unpublished group_media:document entity' - 'view unpublished group_media:image entity' - 'view unpublished group_media:other entity' diff --git a/services/drupal/config/sync/group.role.web_area-anonymous.yml b/services/drupal/config/sync/group.role.web_area-anonymous.yml index 13ec708636..cc185ff32d 100644 --- a/services/drupal/config/sync/group.role.web_area-anonymous.yml +++ b/services/drupal/config/sync/group.role.web_area-anonymous.yml @@ -14,6 +14,7 @@ permissions_ui: true permissions: - 'view group' - 'view group_media:audio entity' + - 'view group_media:banner_image entity' - 'view group_media:document entity' - 'view group_media:image entity' - 'view group_media:other entity' diff --git a/services/drupal/config/sync/group.role.web_area-approver.yml b/services/drupal/config/sync/group.role.web_area-approver.yml index 1253aa9e41..f6de7d8f9f 100644 --- a/services/drupal/config/sync/group.role.web_area-approver.yml +++ b/services/drupal/config/sync/group.role.web_area-approver.yml @@ -15,6 +15,7 @@ permissions: - 'access group_media overview' - 'access group_node overview' - 'delete any group_media:audio entity' + - 'delete any group_media:banner_image entity' - 'delete any group_media:document entity' - 'delete any group_media:image entity' - 'delete any group_media:other entity' @@ -28,6 +29,7 @@ permissions: - 'delete any group_node:regulation content' - 'delete any group_node:webform content' - 'delete own group_media:audio entity' + - 'delete own group_media:banner_image entity' - 'delete own group_media:document entity' - 'delete own group_media:image entity' - 'delete own group_media:other entity' @@ -41,6 +43,7 @@ permissions: - 'delete own group_node:regulation content' - 'delete own group_node:webform content' - 'update any group_media:audio entity' + - 'update any group_media:banner_image entity' - 'update any group_media:document entity' - 'update any group_media:image entity' - 'update any group_media:other entity' @@ -54,6 +57,7 @@ permissions: - 'update any group_node:regulation content' - 'update any group_node:webform content' - 'update own group_media:audio entity' + - 'update own group_media:banner_image entity' - 'update own group_media:document entity' - 'update own group_media:image entity' - 'update own group_media:other entity' @@ -76,6 +80,7 @@ permissions: - 'view group' - 'view group webform submissions' - 'view group_media:audio entity' + - 'view group_media:banner_image entity' - 'view group_media:document entity' - 'view group_media:image entity' - 'view group_media:other entity' @@ -100,6 +105,7 @@ permissions: - 'view latest version for group_node:web_area' - 'view latest version for group_node:webform' - 'view unpublished group_media:audio entity' + - 'view unpublished group_media:banner_image entity' - 'view unpublished group_media:document entity' - 'view unpublished group_media:image entity' - 'view unpublished group_media:other entity' diff --git a/services/drupal/config/sync/group.role.web_area-editor.yml b/services/drupal/config/sync/group.role.web_area-editor.yml index f7e01d9d10..28312a03ad 100644 --- a/services/drupal/config/sync/group.role.web_area-editor.yml +++ b/services/drupal/config/sync/group.role.web_area-editor.yml @@ -24,6 +24,7 @@ permissions: - 'create group_node:regulation entity' - 'create group_node:webform entity' - 'delete any group_media:audio entity' + - 'delete any group_media:banner_image entity' - 'delete any group_media:document entity' - 'delete any group_media:image entity' - 'delete any group_media:other entity' @@ -37,6 +38,7 @@ permissions: - 'delete any group_node:regulation content' - 'delete any group_node:webform content' - 'delete own group_media:audio entity' + - 'delete own group_media:banner_image entity' - 'delete own group_media:document entity' - 'delete own group_media:image entity' - 'delete own group_media:other entity' @@ -53,6 +55,7 @@ permissions: - 'manage group_content_menu' - 'manage group_content_menu menu items' - 'update any group_media:audio entity' + - 'update any group_media:banner_image entity' - 'update any group_media:document entity' - 'update any group_media:image entity' - 'update any group_media:other entity' @@ -76,6 +79,7 @@ permissions: - 'update any group_node:webform entity' - 'update group_menu:menu entity' - 'update own group_media:audio entity' + - 'update own group_media:banner_image entity' - 'update own group_media:document entity' - 'update own group_media:image entity' - 'update own group_media:other entity' @@ -110,6 +114,7 @@ permissions: - 'view group' - 'view group webform submissions' - 'view group_media:audio entity' + - 'view group_media:banner_image entity' - 'view group_media:document entity' - 'view group_media:image entity' - 'view group_media:other entity' @@ -134,6 +139,7 @@ permissions: - 'view latest version for group_node:web_area' - 'view latest version for group_node:webform' - 'view unpublished group_media:audio entity' + - 'view unpublished group_media:banner_image entity' - 'view unpublished group_media:document entity' - 'view unpublished group_media:image entity' - 'view unpublished group_media:other entity' diff --git a/services/drupal/config/sync/group.role.web_area-member.yml b/services/drupal/config/sync/group.role.web_area-member.yml index f42b784236..2839a6868b 100644 --- a/services/drupal/config/sync/group.role.web_area-member.yml +++ b/services/drupal/config/sync/group.role.web_area-member.yml @@ -15,6 +15,7 @@ permissions: - 'access group_media overview' - 'access group_node overview' - 'create group_media:audio entity' + - 'create group_media:banner_image entity' - 'create group_media:document entity' - 'create group_media:image entity' - 'create group_media:other entity' @@ -27,11 +28,13 @@ permissions: - 'create group_node:public_notice entity' - 'create group_node:regulation entity' - 'delete any group_media:audio entity' + - 'delete any group_media:banner_image entity' - 'delete any group_media:document entity' - 'delete any group_media:image entity' - 'delete any group_media:other entity' - 'delete any group_media:remote_video entity' - 'delete own group_media:audio entity' + - 'delete own group_media:banner_image entity' - 'delete own group_media:document entity' - 'delete own group_media:image entity' - 'delete own group_media:other entity' @@ -53,6 +56,7 @@ permissions: - 'revert group_node:web_area revision' - 'revert group_node:webform revision' - 'update any group_media:audio entity' + - 'update any group_media:banner_image entity' - 'update any group_media:document entity' - 'update any group_media:image entity' - 'update any group_media:other entity' @@ -65,6 +69,7 @@ permissions: - 'update any group_node:public_notice entity' - 'update any group_node:regulation entity' - 'update own group_media:audio entity' + - 'update own group_media:banner_image entity' - 'update own group_media:document entity' - 'update own group_media:image entity' - 'update own group_media:other entity' @@ -92,6 +97,7 @@ permissions: - 'view group' - 'view group webform submissions' - 'view group_media:audio entity' + - 'view group_media:banner_image entity' - 'view group_media:document entity' - 'view group_media:image entity' - 'view group_media:other entity' @@ -125,6 +131,7 @@ permissions: - 'view latest version for group_node:web_area' - 'view latest version for group_node:webform' - 'view unpublished group_media:audio entity' + - 'view unpublished group_media:banner_image entity' - 'view unpublished group_media:document entity' - 'view unpublished group_media:image entity' - 'view unpublished group_media:other entity' diff --git a/services/drupal/config/sync/group.role.web_area-outsider.yml b/services/drupal/config/sync/group.role.web_area-outsider.yml index 32c9eecd4b..424bb6b025 100644 --- a/services/drupal/config/sync/group.role.web_area-outsider.yml +++ b/services/drupal/config/sync/group.role.web_area-outsider.yml @@ -32,6 +32,7 @@ permissions: - 'view all group_node:webform revisions' - 'view group' - 'view group_media:audio entity' + - 'view group_media:banner_image entity' - 'view group_media:document entity' - 'view group_media:image entity' - 'view group_media:other entity' From 75fca35194c17f46bbfe37e4ce01aaffb7908c5e Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Tue, 11 Oct 2022 12:07:46 -0400 Subject: [PATCH 15/59] EPAD8-1681 ensure banner images are displayed as links in dashboard --- ....media.banner_image.link_with_metadata.yml | 39 +++++++++++++++++++ .../sync/views.view.media_search_api.yml | 1 + 2 files changed, 40 insertions(+) create mode 100644 services/drupal/config/sync/core.entity_view_display.media.banner_image.link_with_metadata.yml diff --git a/services/drupal/config/sync/core.entity_view_display.media.banner_image.link_with_metadata.yml b/services/drupal/config/sync/core.entity_view_display.media.banner_image.link_with_metadata.yml new file mode 100644 index 0000000000..aae57b7337 --- /dev/null +++ b/services/drupal/config/sync/core.entity_view_display.media.banner_image.link_with_metadata.yml @@ -0,0 +1,39 @@ +uuid: 4155eaee-e9c4-4a15-966f-18bffc2402ae +langcode: en +status: true +dependencies: + config: + - core.entity_view_mode.media.link_with_metadata + - field.field.media.banner_image.field_media_image + - media.type.banner_image + module: + - epa_wysiwyg + - layout_builder + - media_inline_embed +third_party_settings: + media_inline_embed: + embed_inline: false + layout_builder: + enabled: false + allow_custom: false +id: media.banner_image.link_with_metadata +targetEntityType: media +bundle: banner_image +mode: link_with_metadata +content: + field_media_image: + type: epa_media_file_link_formatter + label: hidden + settings: + show_extension: true + third_party_settings: { } + weight: 0 + region: content +hidden: + created: true + entitygroupfield: true + langcode: true + name: true + search_api_excerpt: true + thumbnail: true + uid: true diff --git a/services/drupal/config/sync/views.view.media_search_api.yml b/services/drupal/config/sync/views.view.media_search_api.yml index a174337a1d..d5ddb5ca71 100644 --- a/services/drupal/config/sync/views.view.media_search_api.yml +++ b/services/drupal/config/sync/views.view.media_search_api.yml @@ -1566,6 +1566,7 @@ display: view_modes: 'entity:media': audio: link_with_metadata + banner_image: link_with_metadata document: link_with_metadata image: link_with_metadata other: link_with_metadata From 9066307a957bc6f71f2bad2ce3c0ada434ed78f6 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Tue, 11 Oct 2022 16:33:12 -0400 Subject: [PATCH 16/59] EPAD8-1681 add banner media to groups --- .../custom/epa_core/epa_core.deploy.php | 60 ++++++++++++++----- 1 file changed, 46 insertions(+), 14 deletions(-) diff --git a/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php b/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php index abff1a8f81..c355cb5511 100644 --- a/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php +++ b/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php @@ -1,5 +1,6 @@ 'web_area-group_node-%', + ':value' => 'banner_slide' + ]; + if (!isset($sandbox['total'])) { $sandbox['total'] = 0; $sandbox['current'] = 0; $sandbox['images_created'] = 0; // Query all images that are being used with banner slides. foreach ($prefixes as $prefix) { - $result = \Drupal::database()->query( - 'SELECT fi.field_image_target_id - FROM ' . $prefix . '__field_image AS fi - LEFT JOIN ' . $prefix . '__field_banner_image AS fb ON fi.revision_id = fb.revision_id - WHERE fb.revision_id IS NULL - AND fi.bundle = :value;', [':value' => 'banner_slide']) - ->fetchCol(); + 'SELECT DISTINCT fi.field_image_target_id +FROM {'. $prefix .'__field_image} AS fi +LEFT JOIN {file_managed} AS fm + ON fm.fid = fi.field_image_target_id +LEFT JOIN {'. $prefix .'__field_banner_image} AS pfb + ON fi.revision_id = pfb.revision_id +LEFT JOIN {paragraph_revision__field_banner_slides} AS fbs + ON fi.revision_id = fbs.field_banner_slides_target_revision_id +LEFT JOIN {node_revision__field_banner} AS nfb + ON nfb.field_banner_target_revision_id = fbs.revision_id +LEFT JOIN {group_content_field_data} gfd + ON gfd.entity_id = nfb.entity_id + AND gfd.type LIKE :group_type +WHERE pfb.revision_id IS NULL + AND fi.bundle = :value;', $replacements)->fetchCol(); $sandbox['total'] += count($result); @@ -202,13 +216,27 @@ function epa_core_deploy_0003_update_banner_slide_images(&$sandbox) { foreach ($prefixes as $prefix) { $files = \Drupal::database()->query( - 'SELECT fi.field_image_target_id, fi.field_image_alt, fm.filename, fm.langcode, fi.entity_id, fi.revision_id - FROM ' . $prefix . '__field_image AS fi - LEFT JOIN file_managed AS fm ON fm.fid = fi.field_image_target_id - LEFT JOIN ' . $prefix . '__field_banner_image AS fb ON fi.revision_id = fb.revision_id - WHERE fb.revision_id IS NULL - AND fi.bundle = :value - LIMIT 500;', [':value' => 'banner_slide']) + 'SELECT DISTINCT fi.field_image_target_id, + fi.field_image_alt, + fm.filename, + fm.langcode, + fi.entity_id, + fi.revision_id, + gfd.gid +FROM {'. $prefix .'__field_image} AS fi +LEFT JOIN {file_managed} AS fm + ON fm.fid = fi.field_image_target_id +LEFT JOIN {'. $prefix .'__field_banner_image} AS pfb + ON fi.revision_id = pfb.revision_id +LEFT JOIN {paragraph_revision__field_banner_slides} AS fbs + ON fi.revision_id = fbs.field_banner_slides_target_revision_id +LEFT JOIN {node_revision__field_banner} AS nfb + ON nfb.field_banner_target_revision_id = fbs.revision_id +LEFT JOIN {group_content_field_data} gfd + ON gfd.entity_id = nfb.entity_id + AND gfd.type LIKE :group_type +WHERE pfb.revision_id IS NULL + AND fi.bundle = :value LIMIT 500;', $replacements) ->fetchAll(); foreach ($files as $file) { @@ -233,6 +261,10 @@ function epa_core_deploy_0003_update_banner_slide_images(&$sandbox) { $image_media->save(); $langcode = $image_media->language()->getId(); $banner_image_target_id = $image_media->id(); + if (!empty($file->gid)) { + $group = Group::load($file->gid); + $group->addContent($image_media, 'group_media:' . $image_media->bundle()); + } $sandbox['images_created']++; } else { $banner_image_target_id = $banner_media[0]; From 2ef252fdb8ba96aab6ccc464827461880022619b Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Wed, 12 Oct 2022 09:04:14 -0400 Subject: [PATCH 17/59] EPAD8-1681 only create new banner media if we can determine which group it belongs to --- .../drupal/web/modules/custom/epa_core/epa_core.deploy.php | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php b/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php index c355cb5511..0427720f59 100644 --- a/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php +++ b/services/drupal/web/modules/custom/epa_core/epa_core.deploy.php @@ -204,7 +204,8 @@ function epa_core_deploy_0003_update_banner_slide_images(&$sandbox) { ON gfd.entity_id = nfb.entity_id AND gfd.type LIKE :group_type WHERE pfb.revision_id IS NULL - AND fi.bundle = :value;', $replacements)->fetchCol(); + AND fi.bundle = :value + AND gid IS NOT NULL;', $replacements)->fetchCol(); $sandbox['total'] += count($result); @@ -236,7 +237,9 @@ function epa_core_deploy_0003_update_banner_slide_images(&$sandbox) { ON gfd.entity_id = nfb.entity_id AND gfd.type LIKE :group_type WHERE pfb.revision_id IS NULL - AND fi.bundle = :value LIMIT 500;', $replacements) + AND fi.bundle = :value + AND gid IS NOT NULL + LIMIT 500;', $replacements) ->fetchAll(); foreach ($files as $file) { From 86363ed7b6f4010d2495b2c2a16a5d6365d0c77e Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Sun, 16 Oct 2022 21:24:58 -0600 Subject: [PATCH 18/59] create all stylesheet, update gulpfile, audio stylesheet+linking, page title stylesheet attempt +linking --- .../web/themes/epa_theme/css/audio/audio.css | 7 ++++ .../themes/epa_theme/css/audio/audio.css.map | 1 + .../epa_theme/css/page-title/page-title.css | 10 +++++ .../css/page-title/page-title.css.map | 1 + .../themes/epa_theme/epa_theme.libraries.yml | 10 +++++ .../drupal/web/themes/epa_theme/gulpfile.js | 5 ++- .../audio/{_audio.scss => audio.scss} | 0 .../_patterns/05-components/audio/audio.twig | 2 + .../page-title/page-title.libraries.yml | 5 +++ .../{_page-title.scss => page-title.scss} | 4 ++ .../05-components/page-title/page-title.twig | 2 + .../web/themes/epa_theme/source/all.scss | 38 +++++++++++++++++++ .../web/themes/epa_theme/source/styles.scss | 2 +- 13 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 services/drupal/web/themes/epa_theme/css/audio/audio.css create mode 100644 services/drupal/web/themes/epa_theme/css/audio/audio.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/page-title/page-title.css create mode 100644 services/drupal/web/themes/epa_theme/css/page-title/page-title.css.map rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/audio/{_audio.scss => audio.scss} (100%) create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.libraries.yml rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/{_page-title.scss => page-title.scss} (60%) create mode 100644 services/drupal/web/themes/epa_theme/source/all.scss diff --git a/services/drupal/web/themes/epa_theme/css/audio/audio.css b/services/drupal/web/themes/epa_theme/css/audio/audio.css new file mode 100644 index 0000000000..ad592d796a --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/audio/audio.css @@ -0,0 +1,7 @@ +.audio { + display: block; + max-width: 100%; + width: 100vw; +} + +/*# sourceMappingURL=audio.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/audio/audio.css.map b/services/drupal/web/themes/epa_theme/css/audio/audio.css.map new file mode 100644 index 0000000000..f318c88921 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/audio/audio.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["audio/audio.scss","audio/audio.css"],"names":[],"mappings":"AAGA;EACE,cAAc;EACd,eAAe;EACf,YAAY;ACFd","file":"audio.css","sourcesContent":["// @file\n// Styles for an audio player.\n\n.audio {\n display: block;\n max-width: 100%;\n width: 100vw;\n}\n",".audio {\n display: block;\n max-width: 100%;\n width: 100vw;\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/page-title/page-title.css b/services/drupal/web/themes/epa_theme/css/page-title/page-title.css new file mode 100644 index 0000000000..b8001c1110 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/page-title/page-title.css @@ -0,0 +1,10 @@ +body { + border: 35px dotted gesso-brand(blue, base); +} + +.page-title { + color: gesso-brand(blue, base); + margin: 0 0 rem(gesso-spacing(3)); +} + +/*# sourceMappingURL=page-title.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/page-title/page-title.css.map b/services/drupal/web/themes/epa_theme/css/page-title/page-title.css.map new file mode 100644 index 0000000000..456a9a48b2 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/page-title/page-title.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["page-title/page-title.scss","page-title/page-title.css"],"names":[],"mappings":"AAGA;EACE,2CAA2C;ACF7C;;ADKA;EACE,8BAA8B;EAC9B,iCAAiC;ACFnC","file":"page-title.css","sourcesContent":["// @file\n// Styles for Page title.\n\nbody {\n border: 35px dotted gesso-brand(blue, base);\n}\n\n.page-title {\n color: gesso-brand(blue, base);\n margin: 0 0 rem(gesso-spacing(3));\n}\n","body {\n border: 35px dotted gesso-brand(blue, base);\n}\n\n.page-title {\n color: gesso-brand(blue, base);\n margin: 0 0 rem(gesso-spacing(3));\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml b/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml index 999e014071..72b6dcf251 100644 --- a/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml +++ b/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml @@ -85,3 +85,13 @@ toggle_admin: dependencies: - epa_theme/common - core/drupal +audio: + version: VERSION + css: + theme: + css/audio/audio.css: {} +page_title: + version: VERSION + css: + theme: + css/page-title/page-title.css: {} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/gulpfile.js b/services/drupal/web/themes/epa_theme/gulpfile.js index 1f5e1e787f..67ea6426a2 100644 --- a/services/drupal/web/themes/epa_theme/gulpfile.js +++ b/services/drupal/web/themes/epa_theme/gulpfile.js @@ -81,7 +81,10 @@ const lintStyles = () => { }; const buildSass = mode => { - return src('*.scss', { cwd: './source' }) + return src([ + 'source/*.scss', + 'source/_patterns/05-components/*/*.scss' + ]) .pipe(sourcemaps.init()) .pipe( sass({ diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/audio/_audio.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/audio/audio.scss similarity index 100% rename from services/drupal/web/themes/epa_theme/source/_patterns/05-components/audio/_audio.scss rename to services/drupal/web/themes/epa_theme/source/_patterns/05-components/audio/audio.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/audio/audio.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/audio/audio.twig index eff20744a6..0c4ebe6bd7 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/audio/audio.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/audio/audio.twig @@ -1,3 +1,5 @@ +{{ attach_library('epa_theme/audio') }} + {% set classes = [ 'audio', 'mediaelementjs', diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.libraries.yml b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.libraries.yml new file mode 100644 index 0000000000..dc9da93b1f --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.libraries.yml @@ -0,0 +1,5 @@ +page-title: + version: 1 + css: + theme: + css/page-title/page-title.css: {} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/_page-title.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.scss similarity index 60% rename from services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/_page-title.scss rename to services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.scss index b7947ddf70..febc4acdd9 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/_page-title.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.scss @@ -1,6 +1,10 @@ // @file // Styles for Page title. +body { + border: 35px dotted gesso-brand(blue, base); +} + .page-title { margin: 0 0 rem(gesso-spacing(3)); } diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.twig index 8bb5a12a3a..dbad3d9c35 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.twig @@ -1,3 +1,5 @@ +{{ attach_library('epa_theme/page_title') }} + {% set classes = [ 'page-title', contextual_links ? 'contextual-region', diff --git a/services/drupal/web/themes/epa_theme/source/all.scss b/services/drupal/web/themes/epa_theme/source/all.scss new file mode 100644 index 0000000000..3f26e73c4f --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/all.scss @@ -0,0 +1,38 @@ +// @file +// Main styles +$wysiwyg: false !default; + +@import '_patterns/uswds-theme-settings.artifact'; +@import 'breakpoint'; + +// Required USWDS styles. +@import 'packages/required'; + +// Gesso configuration. +@import '_patterns/00-config/**/*.scss'; +@import '_patterns/01-global/**/*.scss'; + +// Global USWDS styles. +// We import everything in 'packages/global' except for 'global/typography' +// which is omitted in favor of Gesso’s base HTML styles. +@import 'lib/normalize'; +@import 'global/font-face'; +@import 'global/focus'; +@import 'global/sizing'; + +// Gesso base styles. +@import '_patterns/02-base/**/*.scss'; + +// USWDS components. +@import 'packages/uswds-components'; +@import '_patterns/03-uswds/**/*.scss'; + +// Gesso layouts and components. +@import '_patterns/04-layouts/**/*.scss'; +@import '_patterns/05-components/**/*.scss'; + +// USWDS and Gesso utility classes. +@import 'packages/uswds-utilities'; +@import '_patterns/utility-classes/**/*.scss'; + +@import '_patterns/shame'; diff --git a/services/drupal/web/themes/epa_theme/source/styles.scss b/services/drupal/web/themes/epa_theme/source/styles.scss index 3f26e73c4f..ae945972fd 100644 --- a/services/drupal/web/themes/epa_theme/source/styles.scss +++ b/services/drupal/web/themes/epa_theme/source/styles.scss @@ -29,7 +29,7 @@ $wysiwyg: false !default; // Gesso layouts and components. @import '_patterns/04-layouts/**/*.scss'; -@import '_patterns/05-components/**/*.scss'; +//@import '_patterns/05-components/**/*.scss'; // USWDS and Gesso utility classes. @import 'packages/uswds-utilities'; From 34c1cb5dc4d2d589f1339bf02249d59f0ecfb91e Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Sun, 16 Oct 2022 22:33:40 -0600 Subject: [PATCH 19/59] re add items to theme.libraries.yml, update all with new style, hidecomponents from styles for now, fix site alert lint error --- .../web/themes/epa_theme/css/audio/audio.css | 1 - .../themes/epa_theme/css/audio/audio.css.map | 2 +- .../epa_theme/css/page-title/page-title.css | 1821 ++++++++++++++++- .../css/page-title/page-title.css.map | 2 +- .../themes/epa_theme/epa_theme.libraries.yml | 10 + .../03-uswds/site-alert/_site-alert.scss | 4 +- .../web/themes/epa_theme/source/all.scss | 84 +- .../web/themes/epa_theme/source/styles.scss | 2 +- 8 files changed, 1888 insertions(+), 38 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/css/audio/audio.css b/services/drupal/web/themes/epa_theme/css/audio/audio.css index ad592d796a..f092c42a34 100644 --- a/services/drupal/web/themes/epa_theme/css/audio/audio.css +++ b/services/drupal/web/themes/epa_theme/css/audio/audio.css @@ -3,5 +3,4 @@ max-width: 100%; width: 100vw; } - /*# sourceMappingURL=audio.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/audio/audio.css.map b/services/drupal/web/themes/epa_theme/css/audio/audio.css.map index f318c88921..3d9c5a73e0 100644 --- a/services/drupal/web/themes/epa_theme/css/audio/audio.css.map +++ b/services/drupal/web/themes/epa_theme/css/audio/audio.css.map @@ -1 +1 @@ -{"version":3,"sources":["audio/audio.scss","audio/audio.css"],"names":[],"mappings":"AAGA;EACE,cAAc;EACd,eAAe;EACf,YAAY;ACFd","file":"audio.css","sourcesContent":["// @file\n// Styles for an audio player.\n\n.audio {\n display: block;\n max-width: 100%;\n width: 100vw;\n}\n",".audio {\n display: block;\n max-width: 100%;\n width: 100vw;\n}\n"]} \ No newline at end of file +{"version":3,"sources":["audio/audio.scss","audio/audio.css"],"names":[],"mappings":"AAGA;EACE,cAAA;EACA,eAAA;EACA,YAAA;ACFF","file":"audio.css","sourcesContent":["// @file\n// Styles for an audio player.\n\n.audio {\n display: block;\n max-width: 100%;\n width: 100vw;\n}\n",".audio {\n display: block;\n max-width: 100%;\n width: 100vw;\n}"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/page-title/page-title.css b/services/drupal/web/themes/epa_theme/css/page-title/page-title.css index b8001c1110..ae56e57590 100644 --- a/services/drupal/web/themes/epa_theme/css/page-title/page-title.css +++ b/services/drupal/web/themes/epa_theme/css/page-title/page-title.css @@ -1,10 +1,1821 @@ -body { - border: 35px dotted gesso-brand(blue, base); +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; } -.page-title { - color: gesso-brand(blue, base); - margin: 0 0 rem(gesso-spacing(3)); +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; } +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +.page-title { + margin: 0 0 1.5rem; +} /*# sourceMappingURL=page-title.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/page-title/page-title.css.map b/services/drupal/web/themes/epa_theme/css/page-title/page-title.css.map index 456a9a48b2..38f6919602 100644 --- a/services/drupal/web/themes/epa_theme/css/page-title/page-title.css.map +++ b/services/drupal/web/themes/epa_theme/css/page-title/page-title.css.map @@ -1 +1 @@ -{"version":3,"sources":["page-title/page-title.scss","page-title/page-title.css"],"names":[],"mappings":"AAGA;EACE,2CAA2C;ACF7C;;ADKA;EACE,8BAA8B;EAC9B,iCAAiC;ACFnC","file":"page-title.css","sourcesContent":["// @file\n// Styles for Page title.\n\nbody {\n border: 35px dotted gesso-brand(blue, base);\n}\n\n.page-title {\n color: gesso-brand(blue, base);\n margin: 0 0 rem(gesso-spacing(3));\n}\n","body {\n border: 35px dotted gesso-brand(blue, base);\n}\n\n.page-title {\n color: gesso-brand(blue, base);\n margin: 0 0 rem(gesso-spacing(3));\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","page-title/page-title.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","page-title/page-title.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AUlwDA;EACE,kBAAA;AVqwDF","file":"page-title.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.page-title {\n margin: 0 0 1.5rem;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for Page title.\n\n@use '../../00-config' as *;\n\n.page-title {\n margin: 0 0 rem(gesso-spacing(3));\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml b/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml index da712cc6a8..a100ef4208 100644 --- a/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml +++ b/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml @@ -92,3 +92,13 @@ before_after_swipe: dependencies: - epa_theme/common - core/drupal +audio: + version: VERSION + css: + theme: + css/audio/audio.css: {} +page_title: + version: VERSION + css: + theme: + css/page-title/page-title.css: {} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/site-alert/_site-alert.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/site-alert/_site-alert.scss index 8fa8bd6a0d..da60460bca 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/site-alert/_site-alert.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/site-alert/_site-alert.scss @@ -25,9 +25,10 @@ } // display alerts on the alerts page even when closed out elsewhere. +/* stylelint-disable */ .view--public-alerts.view--display-page_1 { .usa-site-alert { - margin-bottom: .5em; + margin-bottom: 0.5em; &.u-hidden { display: block !important; @@ -39,3 +40,4 @@ } } } +/* stylelint-enable */ \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/source/all.scss b/services/drupal/web/themes/epa_theme/source/all.scss index 3f26e73c4f..43d764f234 100644 --- a/services/drupal/web/themes/epa_theme/source/all.scss +++ b/services/drupal/web/themes/epa_theme/source/all.scss @@ -1,38 +1,66 @@ // @file // Main styles -$wysiwyg: false !default; -@import '_patterns/uswds-theme-settings.artifact'; -@import 'breakpoint'; +// Configuration +@use '_patterns/00-config' as *; +@use '_patterns/01-global' as *; -// Required USWDS styles. -@import 'packages/required'; +// Base styles +@forward 'uswds-global'; +@forward '_patterns/02-base'; -// Gesso configuration. -@import '_patterns/00-config/**/*.scss'; -@import '_patterns/01-global/**/*.scss'; +// USWDS components +// We pull in everything in 'packages/uswds' except for: +// - 'uswds-global': pulled in elsewhere. +// - 'uswds-typography': omitted in favor of Gesso’s base HTML styles. +// - 'uswds-utilities': pulled in elsewhere. +@forward 'usa-accordion'; +@forward 'usa-alert'; +@forward 'usa-banner'; +@forward 'usa-breadcrumb'; +@forward 'usa-button-group'; +@forward 'usa-button'; +@forward 'usa-card'; +@forward 'usa-checklist'; +@forward 'usa-collection'; +@forward 'usa-embed-container'; +@forward 'usa-footer'; +@forward 'usa-form'; +@forward 'usa-graphic-list'; +@forward 'usa-header'; +@forward 'usa-hero'; +@forward 'usa-icon-list'; +@forward 'usa-icon'; +@forward 'usa-identifier'; +@forward 'usa-layout-docs'; +@forward 'usa-layout-grid'; +@forward 'usa-media-block'; +@forward 'usa-modal'; +@forward 'usa-nav'; +@forward 'usa-pagination'; +@forward 'usa-process-list'; +@forward 'usa-search'; +@forward 'usa-section'; +@forward 'usa-sidenav'; +@forward 'usa-site-alert'; +@forward 'usa-skipnav'; +@forward 'usa-step-indicator'; +@forward 'usa-summary-box'; +@forward 'usa-table'; +@forward 'usa-tag'; +@forward 'usa-tooltip'; +@forward 'uswds-form-controls'; +@forward '_patterns/03-uswds'; -// Global USWDS styles. -// We import everything in 'packages/global' except for 'global/typography' -// which is omitted in favor of Gesso’s base HTML styles. -@import 'lib/normalize'; -@import 'global/font-face'; -@import 'global/focus'; -@import 'global/sizing'; +// Layouts +@forward '_patterns/04-layouts'; -// Gesso base styles. -@import '_patterns/02-base/**/*.scss'; - -// USWDS components. -@import 'packages/uswds-components'; -@import '_patterns/03-uswds/**/*.scss'; - -// Gesso layouts and components. -@import '_patterns/04-layouts/**/*.scss'; -@import '_patterns/05-components/**/*.scss'; +// Components +@forward '_patterns/05-components'; // USWDS and Gesso utility classes. -@import 'packages/uswds-utilities'; -@import '_patterns/utility-classes/**/*.scss'; +@forward 'uswds-utilities'; +@forward '_patterns/utility-classes'; -@import '_patterns/shame'; +// Shame +@forward '_patterns/shame'; diff --git a/services/drupal/web/themes/epa_theme/source/styles.scss b/services/drupal/web/themes/epa_theme/source/styles.scss index 43d764f234..7a4f1e0d0f 100644 --- a/services/drupal/web/themes/epa_theme/source/styles.scss +++ b/services/drupal/web/themes/epa_theme/source/styles.scss @@ -56,7 +56,7 @@ @forward '_patterns/04-layouts'; // Components -@forward '_patterns/05-components'; +//@forward '_patterns/05-components'; // USWDS and Gesso utility classes. @forward 'uswds-utilities'; From df11d08ab62d8bc51fa0b3f3d59cef587b7ad8ad Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Mon, 17 Oct 2022 22:36:03 -0600 Subject: [PATCH 20/59] rename all => core, restore styles as full, remove unused libraries file --- services/drupal/web/themes/epa_theme/source/_meta/_head.twig | 2 +- .../05-components/page-title/page-title.libraries.yml | 5 ----- .../web/themes/epa_theme/source/{all.scss => core.scss} | 2 +- services/drupal/web/themes/epa_theme/source/styles.scss | 2 +- 4 files changed, 3 insertions(+), 8 deletions(-) delete mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.libraries.yml rename services/drupal/web/themes/epa_theme/source/{all.scss => core.scss} (97%) diff --git a/services/drupal/web/themes/epa_theme/source/_meta/_head.twig b/services/drupal/web/themes/epa_theme/source/_meta/_head.twig index 57d009f7c0..426821bec2 100644 --- a/services/drupal/web/themes/epa_theme/source/_meta/_head.twig +++ b/services/drupal/web/themes/epa_theme/source/_meta/_head.twig @@ -26,7 +26,7 @@ - + {% else %} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.libraries.yml b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.libraries.yml deleted file mode 100644 index dc9da93b1f..0000000000 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.libraries.yml +++ /dev/null @@ -1,5 +0,0 @@ -page-title: - version: 1 - css: - theme: - css/page-title/page-title.css: {} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/source/all.scss b/services/drupal/web/themes/epa_theme/source/core.scss similarity index 97% rename from services/drupal/web/themes/epa_theme/source/all.scss rename to services/drupal/web/themes/epa_theme/source/core.scss index 43d764f234..b972c316d5 100644 --- a/services/drupal/web/themes/epa_theme/source/all.scss +++ b/services/drupal/web/themes/epa_theme/source/core.scss @@ -56,7 +56,7 @@ @forward '_patterns/04-layouts'; // Components -@forward '_patterns/05-components'; +// @forward '_patterns/05-components'; // USWDS and Gesso utility classes. @forward 'uswds-utilities'; diff --git a/services/drupal/web/themes/epa_theme/source/styles.scss b/services/drupal/web/themes/epa_theme/source/styles.scss index 7a4f1e0d0f..43d764f234 100644 --- a/services/drupal/web/themes/epa_theme/source/styles.scss +++ b/services/drupal/web/themes/epa_theme/source/styles.scss @@ -56,7 +56,7 @@ @forward '_patterns/04-layouts'; // Components -//@forward '_patterns/05-components'; +@forward '_patterns/05-components'; // USWDS and Gesso utility classes. @forward 'uswds-utilities'; From 88cb50482547f82aab64893f9e41387acb1defad Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Mon, 17 Oct 2022 23:29:33 -0600 Subject: [PATCH 21/59] remove page title (?), add block, document, dropbutton, facet, facet list, filters, header link, update theme to use core.css --- .../page-title.css => block/block.css} | 10 +- .../themes/epa_theme/css/block/block.css.map | 1 + .../epa_theme/css/document/document.css | 2650 +++++++++++++++++ .../epa_theme/css/document/document.css.map | 1 + .../epa_theme/css/dropbutton/dropbutton.css | 1947 ++++++++++++ .../css/dropbutton/dropbutton.css.map | 1 + .../epa_theme/css/facet-list/facet-list.css | 1840 ++++++++++++ .../css/facet-list/facet-list.css.map | 1 + .../web/themes/epa_theme/css/facet/facet.css | 1871 ++++++++++++ .../themes/epa_theme/css/facet/facet.css.map | 1 + .../themes/epa_theme/css/filters/filters.css | 1862 ++++++++++++ .../epa_theme/css/filters/filters.css.map | 1 + .../epa_theme/css/header-link/header-link.css | 1826 ++++++++++++ .../css/header-link/header-link.css.map | 1 + .../css/page-title/page-title.css.map | 1 - .../themes/epa_theme/epa_theme.libraries.yml | 38 +- .../themes/epa_theme/source/_meta/_head.twig | 2 +- .../block/{_block.scss => block.scss} | 0 .../_patterns/05-components/block/block.twig | 2 + .../{_document.scss => document.scss} | 0 .../05-components/document/document.twig | 2 + .../{_dropbutton.scss => dropbutton.scss} | 0 .../05-components/dropbutton/dropbutton.twig | 2 + .../{_facet-list.scss => facet-list.scss} | 0 .../05-components/facet-list/facet-list.twig | 2 + .../facet/facet--active/facet--active.twig | 2 + .../facet/{_facet.scss => facet.scss} | 0 .../_patterns/05-components/facet/facet.twig | 2 + .../filters/{_filters.scss => filters.scss} | 0 .../05-components/filters/filters.twig | 2 + .../{_header-link.scss => header-link.scss} | 0 .../header-link/header-link.twig | 2 + .../{page-title.scss => _page-title.scss} | 0 .../05-components/page-title/page-title.twig | 2 - 34 files changed, 12061 insertions(+), 11 deletions(-) rename services/drupal/web/themes/epa_theme/css/{page-title/page-title.css => block/block.css} (99%) create mode 100644 services/drupal/web/themes/epa_theme/css/block/block.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/document/document.css create mode 100644 services/drupal/web/themes/epa_theme/css/document/document.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/dropbutton/dropbutton.css create mode 100644 services/drupal/web/themes/epa_theme/css/dropbutton/dropbutton.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/facet-list/facet-list.css create mode 100644 services/drupal/web/themes/epa_theme/css/facet-list/facet-list.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/facet/facet.css create mode 100644 services/drupal/web/themes/epa_theme/css/facet/facet.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/filters/filters.css create mode 100644 services/drupal/web/themes/epa_theme/css/filters/filters.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/header-link/header-link.css create mode 100644 services/drupal/web/themes/epa_theme/css/header-link/header-link.css.map delete mode 100644 services/drupal/web/themes/epa_theme/css/page-title/page-title.css.map rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/block/{_block.scss => block.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/document/{_document.scss => document.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/dropbutton/{_dropbutton.scss => dropbutton.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet-list/{_facet-list.scss => facet-list.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/{_facet.scss => facet.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/filters/{_filters.scss => filters.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/header-link/{_header-link.scss => header-link.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/{page-title.scss => _page-title.scss} (100%) diff --git a/services/drupal/web/themes/epa_theme/css/page-title/page-title.css b/services/drupal/web/themes/epa_theme/css/block/block.css similarity index 99% rename from services/drupal/web/themes/epa_theme/css/page-title/page-title.css rename to services/drupal/web/themes/epa_theme/css/block/block.css index ae56e57590..715aa98c01 100644 --- a/services/drupal/web/themes/epa_theme/css/page-title/page-title.css +++ b/services/drupal/web/themes/epa_theme/css/block/block.css @@ -1815,7 +1815,11 @@ through all possible variants color: #162e51; } -.page-title { - margin: 0 0 1.5rem; +.block { + margin-bottom: 1.5rem; } -/*# sourceMappingURL=page-title.css.map */ + +.block--provider-layout-builder { + margin-bottom: 0; +} +/*# sourceMappingURL=block.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/block/block.css.map b/services/drupal/web/themes/epa_theme/css/block/block.css.map new file mode 100644 index 0000000000..5797fb6b08 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/block/block.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","block/block.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","block/block.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AUlwDA;EACE,qBAAA;AVqwDF;;AUjwDA;EACE,gBAAA;AVowDF","file":"block.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.block {\n margin-bottom: 1.5rem;\n}\n\n.block--provider-layout-builder {\n margin-bottom: 0;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for Block.\n\n@use '../../00-config' as *;\n\n.block {\n margin-bottom: rem(gesso-spacing(3));\n}\n\n// Disable margin for layout builder blocks.\n.block--provider-layout-builder {\n margin-bottom: 0;\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/document/document.css b/services/drupal/web/themes/epa_theme/css/document/document.css new file mode 100644 index 0000000000..9cf0a38740 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/document/document.css @@ -0,0 +1,2650 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +ol, ul { + margin-bottom: 1em; + margin-top: 1em; + line-height: 1.5; + padding-left: 3ch; +} +ol:last-child, ul:last-child { + margin-bottom: 0; +} +ol ul, ul ul, +ol ol, +ul ol { + margin-top: 0.25em; +} + +li { + margin-bottom: 0.25em; + max-width: 68ex; +} +li:last-child { + margin-bottom: 0; +} + +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +* { + -webkit-transition-duration: 200ms; + transition-duration: 200ms; + -webkit-transition-property: background-color, border-color, color, opacity, text-shadow, -webkit-box-shadow, -webkit-transform; + transition-property: background-color, border-color, color, opacity, text-shadow, -webkit-box-shadow, -webkit-transform; + transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform; + transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform, -webkit-box-shadow, -webkit-transform; + -webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + +@media print { + * { + background-color: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #000 !important; + text-shadow: none !important; + } + + @page { + margin: 2cm; + } +} +[id] { + scroll-margin-top: 1em; +} + +html { + -webkit-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + -webkit-font-kerning: normal; + font-kerning: normal; + font-size: 100%; + min-height: 100%; +} + +body { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 1.5; + background-color: #fff; + color: #1b1b1b; + margin: 0; + padding: 0; + word-wrap: break-word; +} +body.has-open-mobile-menu { + overflow: hidden; + -webkit-overflow-scrolling: touch; +} + +@media print { + nav { + display: none; + } +} + +summary { + display: list-item; +} + +iframe { + border: 0; + max-width: 100%; +} +@media print { + iframe { + display: none; + } +} + +h6, +.h6, h5, +.h5, h4, +.h4, h3, +.h3, h2, +.h2, h1 { + margin-bottom: 0; + margin-top: 0; + clear: none; + margin-bottom: 1rem; + clear: none; + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; + text-rendering: optimizeLegibility; +} +* + h6, +* + .h6, * + h5, +* + .h5, * + h4, +* + .h4, * + h3, +* + .h3, * + h2, +* + .h2, * + h1 { + margin-top: 1em; +} +@media print { + h6, +.h6, h5, +.h5, h4, +.h4, h3, +.h3, h2, +.h2, h1 { + orphans: 3; + page-break-after: avoid; + widows: 3; + } + h6::after, +.h6::after, h5::after, +.h5::after, h4::after, +.h4::after, h3::after, +.h3::after, h2::after, +.h2::after, h1::after { + display: inline-block; + } +} + +h1 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 2.44rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h1 { + font-size: 1.95rem; + } +} + +h2, +.h2 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.95rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h2, +.h2 { + font-size: 1.34rem; + } +} + +h3, +.h3 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.34rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h3, +.h3 { + font-size: 1.1rem; + } +} + +h4, +.h4 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 0.98rem; + font-weight: 700; + line-height: 1.2; +} + +h5, +.h5 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 0.91rem; + font-weight: 700; + line-height: 1.2; +} + +h6, +.h6 { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 0.87rem; + font-weight: normal; + letter-spacing: 0.025em; + line-height: 1.1; + text-transform: uppercase; +} + +p { + line-height: 1.5; + margin-bottom: 1rem; + margin-top: 0; +} +@media print { + p { + orphans: 3; + widows: 3; + } +} +p:empty { + margin: 0 !important; +} + +a { + background-color: transparent; + color: #005ea2; + -webkit-text-decoration-skip: objects; +} +a:visited { + color: #54278f; +} +a:hover, a:focus { + color: #1a4480; +} +a:active { + color: #162e51; +} +@media print { + a, a:visited { + text-decoration: none; + } + a[href]::after { + content: " <" attr(href) ">"; + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 10pt; + font-weight: normal; + text-transform: lowercase; + } + a[href^="/"]::after { + content: " "; + } + a[href^="javascript:"]::after, a[href^="mailto:"]::after, a[href^="tel:"]::after, a[href^="#"]::after, a[href*="?"]::after { + content: ""; + } +} + +abbr[title] { + border-bottom: 1px dotted; + text-decoration: none; +} +@media (min-width: max-width 40rem) { + abbr[title] { + border-bottom: 0; + } + abbr[title]::after { + content: " (" attr(title) ")"; + } +} +abbr:hover { + cursor: help; +} +@media print { + abbr[title] { + border-bottom: 0; + } + abbr[title]::after { + content: " (" attr(title) ")"; + } +} + +cite { + color: #565c65; + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 0.93rem; + font-style: normal; + font-weight: normal; + letter-spacing: 0.025em; + line-height: 1.6; +} + +dfn { + font-style: normal; +} + +ins { + text-decoration: none; +} + +mark { + background: #ff0; + color: #000; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +var { + font-style: normal; +} + +blockquote { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.1rem; + font-weight: normal; + line-height: 1.7; + background-color: #fff; + border-left: 0.5rem solid #00bde3; + clear: both; + margin: 0 0 1.5rem; + padding: 1.25rem 0 1.25rem 1.25rem; +} +blockquote > :last-child { + margin-bottom: 0; +} +* + blockquote { + margin-top: 1.5rem; +} + +blockquote cite { + display: block; + margin: 1rem 0; + text-align: left; +} + +blockquote p { + color: inherit; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} +blockquote cite em { + border-left: 1px solid #71767a; + font-weight: normal; + margin-left: 0.25rem; + padding-left: 0.5rem; +} +@media print { + blockquote { + page-break-inside: avoid; + } +} + +pre { + margin: 0 0 1rem; + overflow: auto; +} +* + pre { + margin-top: 1rem; +} +@media print { + pre { + page-break-inside: avoid; + } +} + +hr { + border-top: solid #a9aeb1; + border-width: 1px 0 0; + -webkit-box-sizing: content-box; + box-sizing: content-box; + height: 0; + margin: 0 0 1.5rem; + overflow: auto; +} +* + hr { + margin-top: 1.5rem; +} + +address { + font-style: normal; +} + +ul { + list-style-type: disc; + margin-top: 0; +} +[dir=rtl] ul { + padding-left: 0; + padding-right: 3ch; +} +ul:last-child { + margin-bottom: revert; +} +ul ol, +ul ul { + margin-top: 0.5rem; +} +ul ul { + list-style-type: circle; +} +ul ul ul { + list-style-type: square; +} + +ol { + margin-top: 0; +} +[dir=rtl] ol { + padding-left: 0; + padding-right: 3ch; +} +ol:last-child { + margin-bottom: revert; +} +ol ol, +ol ul { + margin-top: 0.5rem; +} +ol ol { + list-style-type: lower-alpha; +} +ol ol ol { + list-style-type: lower-roman; +} + +li { + max-width: unset; +} +@media print { + li { + page-break-inside: avoid; + } +} + +dd { + margin: 0 0 1rem 3ch; +} +[dir=rtl] dd { + margin-left: 0; + margin-right: 3ch; +} + +dl { + margin: 0 0 1rem; +} + +table { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 1.5; + border-collapse: collapse; + border-spacing: 0; + color: #1b1b1b; + margin: 1.25rem 0; + text-align: left; + /* stylelint-disable selector-class-pattern */ + /* stylelint-enable selector-class-pattern */ +} +table thead th { + background-clip: padding-box; + color: #1b1b1b; + font-weight: 700; + line-height: 1.3; +} +table thead th, +table thead td { + background-color: #dfe1e2; + color: #1b1b1b; +} +table tbody th { + text-align: left; +} +table th, +table td { + background-color: white; + border: 1px solid #1b1b1b; + font-weight: normal; + padding: 0.5rem 1rem; +} +table caption { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1rem; + font-weight: 700; + margin-bottom: 0.75rem; + text-align: left; +} +table th[data-sortable] { + padding-right: 2.5rem; + position: relative; +} +table th[data-sortable]::after { + border-bottom-color: transparent; + border-bottom-style: solid; + border-bottom-width: 1px; + bottom: 0; + content: ""; + height: 0; + left: 0; + position: absolute; + width: 100%; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button, table th[data-sortable][aria-sort=none] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:visited, table th[data-sortable][aria-sort=none] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g.unsorted { + fill: #1b1b1b; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover .usa-icon > g.unsorted { + fill: black; +} +table th[data-sortable][aria-sort=descending], table th[data-sortable][aria-sort=ascending] { + background-color: #97d4ea; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g.descending { + fill: #1b1b1b; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g.ascending { + fill: #1b1b1b; +} +table thead th[aria-sort] { + background-color: #97d4ea; + color: #1b1b1b; +} +table td[data-sort-active], +table th[data-sort-active] { + background-color: #e1f3f8; + color: #1b1b1b; +} + +@media print { + thead { + display: table-header-group; + } +} + +tbody th { + background-color: #f0f0f0; + font-weight: 700; +} + +@media print { + tr { + page-break-inside: avoid; + } +} + +button { + overflow: visible; +} + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +input { + line-height: normal; +} + +legend { + border: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: inherit; + display: table; + margin: 0; + max-width: 100%; + padding: 0; + white-space: normal; +} + +optgroup { + font-weight: 700; +} + +textarea { + overflow: auto; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +canvas { + display: inline-block; +} + +figure { + margin: 0; +} + +img { + border: 0; + font-style: italic; + height: auto; + max-width: 100%; + vertical-align: middle; +} +@media print { + img { + max-width: 100% !important; + page-break-inside: avoid; + } +} + +svg:not(:root) { + overflow: hidden; +} + +.document__meta { + color: #565c65; + font-size: 0.93rem; +} +/*# sourceMappingURL=document.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/document/document.css.map b/services/drupal/web/themes/epa_theme/css/document/document.css.map new file mode 100644 index 0000000000..fc874c7415 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/document/document.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/placeholders/_list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_margin.scss","document/document.css","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","../02-base/02-html-elements/00-universal/_universal.scss","../02-base/02-html-elements/01-html/_html.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-kerning.scss","../02-base/02-html-elements/02-body/_body.scss","../02-base/02-html-elements/10-nav/_nav.scss","../02-base/02-html-elements/11-details/_details.scss","../02-base/02-html-elements/12-iframe/_iframe.scss","../02-base/02-html-elements/13-headings/_headings.scss","../00-config/01-mixins/uswds-overrides/_mixins.uswds.typography.scss","../00-config/01-mixins/_mixins.display-text-style.scss","../00-config/01-mixins/_mixins.breakpoint.scss","../02-base/02-html-elements/14-paragraph/_paragraph.scss","../02-base/02-html-elements/15-inline-elements/_inline-elements.scss","../02-base/02-html-elements/16-blockquote/_blockquote.scss","../02-base/02-html-elements/17-preformatted-text/_preformatted-text.scss","../02-base/02-html-elements/18-horizontal-rule/_horizontal-rule.scss","../02-base/02-html-elements/19-address/_address.scss","../02-base/02-html-elements/20-unordered-list/_unordered-list.scss","../02-base/02-html-elements/21-ordered-list/_ordered-list.scss","../02-base/02-html-elements/22-list-item/_list-item.scss","../02-base/02-html-elements/23-definition-list/_definition-list.scss","../02-base/02-html-elements/24-table/_table.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_width.scss","../02-base/02-html-elements/25-forms/_forms.scss","../02-base/02-html-elements/26-media/_audio.scss","../02-base/02-html-elements/26-media/_canvas.scss","../02-base/02-html-elements/26-media/_figure.scss","../02-base/02-html-elements/26-media/_img.scss","../02-base/02-html-elements/26-media/_svg.scss","document/document.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACpBA;ECiCI,kBAAA;EACA,eAAA;EDhCF,gBAAA;EACA,iBAAA;AEk1CF;AFh1CE;EACE,gBAAA;AEk1CJ;AF/0CE;;;EAEE,kBAAA;AEk1CJ;;AF90CA;EACE,qBAAA;EACA,eAAA;AEi1CF;AF/0CE;EACE,gBAAA;AEi1CJ;;ACz2CA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AF+1CJ;AEp2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AFs2CJ;AE32CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AF62CJ;AEl3CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFo3CJ;AEz3CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;AF23CJ;AEh4CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFk4CJ;AEv4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;AFy4CJ;AE94CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;AFg5CJ;AEr5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFu5CJ;AE55CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;AF85CJ;AEn6CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AFq6CJ;AE16CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;AF46CJ;AEj7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AFm7CJ;AEx7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;AF07CJ;AE/7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AFi8CJ;AEt8CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;AFw8CJ;AE78CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;AF+8CJ;AEp9CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFs9CJ;AC19CA,qBAAA;AEPA;ETiCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AHs+CF;AO1+CI;EJVJ;IAiBI,WAAA;EHu+CF;AACF;AGr+CE;EACE,YAAA;AHu+CJ;AGp+CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AHs+CJ;AGn+CE;EEnBA,YAAA;ECIA,yBAAA;ANs/CF;AGl+CE;EAEE,uBAAA;AHm+CJ;AGh+CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;ATihDF;AS/gDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AT4gDJ;;AGt+CA;EElCE,cAAA;ECIA,yBAAA;ANygDF;AGx+CE;EErCA,cAAA;ECIA,yBAAA;AN6gDF;AGx+CE;EEzCA,cAAA;ECIA,yBAAA;ANihDF;AGv+CE;EE9CA,YAAA;ECIA,yBAAA;ANqhDF;;AGr+CA;EEpDE,cAAA;ECIA,yBAAA;AN0hDF;AGv+CE;EEvDA,cAAA;ECIA,yBAAA;AN8hDF;AGv+CE;EE3DA,YAAA;ECIA,yBAAA;ANkiDF;AGt+CE;EEhEA,YAAA;ECIA,yBAAA;ANsiDF;;AGp+CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHu+CF;AGr+CE;EACE,cAAA;AHu+CJ;AGp+CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHq+CJ;AGl+CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHm+CJ;AGh+CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;AH89CJ;AG59CI;EACE,cAAA;AH89CN;AG39CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AH49CN;AGz9CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;AH09CN;AGv9CI;EKpIF,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AHo+CN;AL1iDE;EACE,cAAA;AK4iDJ;ALziDE;EACE,cAAA;AK2iDJ;ALxiDE;EACE,cAAA;AK0iDJ;ALviDE;EgBpEA,8BAAA;EACA,iBAAA;AX8mDF;AU1mDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV4lDJ;AUzlDE;EAEE,cAAA;AV0lDJ;AUvlDE;EACE,cAAA;AVylDJ;AUtlDE;EACE,cAAA;AVwlDJ;AG//CM;EACE,cAAA;AHigDR;AG9/CM;EAEE,cAAA;AH+/CR;AG5/CM;EAEE,YAAA;AH6/CR;;AGv/CA;EE3IE,YAAA;ECIA,yBAAA;ANmoDF;AGz/CE;EE9IA,YAAA;ECIA,yBAAA;ANuoDF;AGx/CE;EEnJA,YAAA;ECIA,yBAAA;AN2oDF;;AGt/CA;EEzJE,YAAA;ECIA,yBAAA;ANgpDF;AGx/CE;EE5JA,YAAA;ECIA,yBAAA;ANopDF;AGv/CE;EEjKA,YAAA;ECIA,yBAAA;ANwpDF;;AGr/CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;AHw/CF;;AGr/CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;ATurDF;ASrrDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;ATkrDJ;;AG7/CA;;;;;EAKE,6BAAA;AHggDF;AG9/CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AHmhDJ;;AG/gDA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AHkhDF;AGhhDE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHmhDJ;;AG/gDA;EK7NE,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;AVgvDF;AL3rDE;EACE,cAAA;AK6rDJ;AL1rDE;EACE,cAAA;AK4rDJ;ALzrDE;EACE,cAAA;AK2rDJ;ALxrDE;EgBpEA,8BAAA;EACA,iBAAA;AX+vDF;AU3vDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV6uDJ;AU1uDE;EAEE,cAAA;AV2uDJ;AUxuDE;EACE,cAAA;AV0uDJ;AUvuDE;EACE,cAAA;AVyuDJ;;AYzxDA;EACE,kCAAA;UAAA,0BAAA;EACA,+HAAA;EAAA,uHAAA;EAAA,uGAAA;EAAA,8IAAA;EAEA,8DAAA;UAAA,sDAAA;AZ2xDF;;AYxxDA;EACE;IACE,wCAAA;IACA,mCAAA;YAAA,2BAAA;IACA,sBAAA;IACA,4BAAA;EZ2xDF;;EYxxDA;IACE,WAAA;EZ2xDF;AACF;AYxxDA;EACE,sBAAA;AZ0xDF;;Aa9yDA;ECLE,uCAAA;UAAA,+BAAA;EACA,4BAAA;UAAA,oBAAA;EDMA,eAAA;EACA,gBAAA;AbkzDF;;AetzDA;ErBoCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;EWVA,sBAAA;EACA,cAAA;EACA,SAAA;EACA,UAAA;EACA,qBAAA;Af2zDF;AexzDE;EACE,gBAAA;EACA,iCAAA;Af0zDJ;;AgBt0DE;EADF;IAEI,aAAA;EhB00DF;AACF;;AiB30DA;EACE,kBAAA;AjB80DF;;AkBj1DA;EACE,SAAA;EACA,eAAA;AlBo1DF;AkBl1DE;EAJF;IAKI,aAAA;ElBq1DF;AACF;;AmBz1DA;;;;;;EpBgCI,gBAAA;EACA,aAAA;EqB/BF,WAAA;EACA,mBAAA;EDDA,WAAA;EACA,qBAAA;MAAA,iBAAA;UAAA,aAAA;EACA,kCAAA;AnBo2DF;AoBn2DE;;;;;;EACE,eAAA;ApB02DJ;AmB12DE;EANF;;;;;;IAOI,UAAA;IACA,uBAAA;IACA,SAAA;EnBk3DF;EmBh3DE;;;;;;IACE,qBAAA;EnBu3DJ;AACF;;AmBn3DA;EETM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBm4DN;AsBl4DE;EHQF;IAMI,kBAAA;EnBw3DF;AACF;;AmBr3DA;;EEnBM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBg5DN;AsB/4DE;EHkBF;;IAOI,kBAAA;EnB23DF;AACF;;AmBx3DA;;EE9BM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArB85DN;AsB75DE;EH6BF;;IAOI,iBAAA;EnB83DF;AACF;;AmB33DA;;EEzCM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArB46DN;;AmB53DA;;EEhDM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBo7DN;;AmB73DA;;EEvDM,kRAAA;EAFA,kBAAA;EAEA,mBAAA;EAAA,uBAAA;EAAA,gBAAA;EAAA,yBAAA;ArB87DN;;AuBt8DA;EHWE,gBAAA;EACA,mBAAA;EACA,aAAA;ApB+7DF;AuBz8DE;EAHF;IAII,UAAA;IACA,SAAA;EvB48DF;AACF;AuBx8DI;EACE,oBAAA;AvB08DN;;AwBr9DA;EACE,6BAAA;EACA,cAAA;EACA,qCAAA;AxBw9DF;AwBt9DE;EACE,cAAA;AxBw9DJ;AwBr9DE;EAEE,cAAA;AxBs9DJ;AwBn9DE;EACE,cAAA;AxBq9DJ;AwBl9DE;EACE;IAEE,qBAAA;ExBm9DJ;EwBh9DE;IACE,4BAAA;IACA,kRAAA;IACA,eAAA;IACA,mBAAA;IACA,yBAAA;ExBk9DJ;EwB/8DE;IACE,2CAAA;ExBi9DJ;EwB98DE;IAKE,WAAA;ExB48DJ;AACF;;AwBv8DE;EACE,yBAAA;EACA,qBAAA;AxB08DJ;AsBl/DE;EEsCA;IAKI,gBAAA;ExB28DJ;EwBz8DI;IACE,6BAAA;ExB28DN;AACF;AwBv8DE;EACE,YAAA;AxBy8DJ;AwBt8DE;EACE;IACE,gBAAA;ExBw8DJ;EwBt8DI;IACE,6BAAA;ExBw8DN;AACF;;AwBj8DA;EHrEM,cAAA;EAAA,kRAAA;EAFA,kBAAA;EAEA,kBAAA;EAAA,mBAAA;EAAA,uBAAA;EAAA,gBAAA;ArBghEN;;AwBn8DA;EACE,kBAAA;AxBs8DF;;AwB/7DA;EACE,qBAAA;AxBk8DF;;AwB77DA;EACE,gBAAA;EACA,WAAA;AxBg8DF;;AwBv7DA;EACE,cAAA;AxB07DF;;AwBr7DA;;EAEE,cAAA;EACA,cAAA;EACA,kBAAA;EACA,wBAAA;AxBw7DF;;AwBr7DA;EACE,eAAA;AxBw7DF;;AwBr7DA;EACE,WAAA;AxBw7DF;;AwBj7DA;EACE,kBAAA;AxBo7DF;;AyB3jEA;EJMM,wRAAA;EAFA,iBAAA;EAEA,mBAAA;EAAA,gBAAA;EIJJ,sBAAA;EACA,iCAAA;EACA,WAAA;EACA,kBAAA;EACA,kCAAA;AzBikEF;AyB9jEE;EACE,gBAAA;AzBgkEJ;AyB5jEE;EACE,kBAAA;AzB8jEJ;;AyB1jEA;EACE,cAAA;EACA,cAAA;EACA,gBAAA;AzB6jEF;;AyBvjEE;EACE,cAAA;EACA,oBAAA;EACA,kBAAA;EACA,oBAAA;EACA,oBAAA;AzB0jEJ;AyBpjEI;EACE,8BAAA;EACA,mBAAA;EACA,oBAAA;EACA,oBAAA;AzBsjEN;AyBljEE;EAtBF;IAuBI,wBAAA;EzBqjEF;AACF;;A0BxmEA;EACE,gBAAA;EACA,cAAA;A1B2mEF;A0BxmEE;EACE,gBAAA;A1B0mEJ;A0BvmEE;EATF;IAUI,wBAAA;E1B0mEF;AACF;;A2BrnEA;EACE,yBAAA;EACA,qBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;A3BwnEF;A2BrnEE;EACE,kBAAA;A3BunEJ;;A4BnoEA;EACE,kBAAA;A5BsoEF;;A6BroEA;EAEE,qBAAA;EACA,aAAA;A7BuoEF;A6BpoEI;EACE,eAAA;EACA,kBAAA;A7BsoEN;A6BloEE;EACE,qBAAA;A7BooEJ;A6BjoEE;;EAEE,kBAAA;A7BmoEJ;A6BhoEE;EACE,uBAAA;A7BkoEJ;A6BhoEI;EACE,uBAAA;A7BkoEN;;A8B3pEA;EAEE,aAAA;A9B6pEF;A8B1pEI;EACE,eAAA;EACA,kBAAA;A9B4pEN;A8BxpEE;EACE,qBAAA;A9B0pEJ;A8BvpEE;;EAEE,kBAAA;A9BypEJ;A8BtpEE;EACE,4BAAA;A9BwpEJ;A8BtpEI;EACE,4BAAA;A9BwpEN;;A+BhrEA;EAEE,gBAAA;A/BkrEF;A+BhrEE;EAJF;IAKI,wBAAA;E/BmrEF;AACF;;AgCzrEA;EACE,oBAAA;AhC4rEF;AgCzrEI;EACE,cAAA;EACA,iBAAA;AhC2rEN;;AgCtrEA;EACE,gBAAA;AhCyrEF;;AiCrsEA;EvCoCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;E8BkMA,yBAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;EACA,gBAAA;EAuCA,6CAAA;EA4BA,4CAAA;AlC67DF;AkC7/DI;EACE,4BAAA;EACA,cA/MoB;EAgNpB,gBAAA;EACA,gBAAA;AlC+/DN;AkCz/DI;;EAEE,yBAAA;EACA,cA1NoB;AlCqtE1B;AkCv/DI;EACE,gBAAA;AlCy/DN;AkCt/DE;;EAEE,uBAAA;EACA,yBAAA;EACA,mBAAA;EACA,oBAAA;AlCw/DJ;AkCr/DE;ExC9MA,kRAAA;EACA,eAAA;EwC+ME,gBAAA;EACA,sBAAA;EACA,gBAAA;AlCw/DJ;AkCp/DE;EA1LA,qBAAA;EACA,kBAAA;AlCirEF;AkChrEE;EACE,gCAAA;EACA,0BAAA;EACA,wBAAA;EACA,SAAA;EACA,WAAA;EACA,SAAA;EACA,OAAA;EACA,kBAAA;EACA,WAAA;AlCkrEJ;AkC9/DM;E1B9PJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlC2rEF;ALxtEE;EACE,cAAA;AK0tEJ;ALvtEE;EACE,cAAA;AKytEJ;ALttEE;EACE,cAAA;AKwtEJ;ALrtEE;EgBpEA,8BAAA;EACA,iBAAA;AX4xEF;AUxxEE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV0wEJ;AUvwEE;EAEE,cAAA;AVwwEJ;AUrwEE;EACE,cAAA;AVuwEJ;AUpwEE;EACE,cAAA;AVswEJ;AkCvtEE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlC0tEJ;AkCztEI;EACE,iBAAA;AlC2tEN;AkCjtEE;EACE,aAAA;AlCmtEJ;AkCjtEE;EACE,WAAA;AlCmtEJ;AkChkEI;EAEE,yBAAA;AlCikEN;AkC7jEM;E1BzQJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlCqwEF;ALlyEE;EACE,cAAA;AKoyEJ;ALjyEE;EACE,cAAA;AKmyEJ;ALhyEE;EACE,cAAA;AKkyEJ;AL/xEE;EgBpEA,8BAAA;EACA,iBAAA;AXs2EF;AUl2EE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AVo1EJ;AUj1EE;EAEE,cAAA;AVk1EJ;AU/0EE;EACE,cAAA;AVi1EJ;AU90EE;EACE,cAAA;AVg1EJ;AkCjyEE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlCoyEJ;AkCnyEI;EACE,iBAAA;AlCqyEN;AkCxwEE;EACE,aAlFsB;AlC41E1B;AkC3nEM;E1B/QJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlCy0EF;ALt2EE;EACE,cAAA;AKw2EJ;ALr2EE;EACE,cAAA;AKu2EJ;ALp2EE;EACE,cAAA;AKs2EJ;ALn2EE;EgBpEA,8BAAA;EACA,iBAAA;AX06EF;AUt6EE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AVw5EJ;AUr5EE;EAEE,cAAA;AVs5EJ;AUn5EE;EACE,cAAA;AVq5EJ;AUl5EE;EACE,cAAA;AVo5EJ;AkCr2EE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlCw2EJ;AkCv2EI;EACE,iBAAA;AlCy2EN;AkCn1EE;EACE,aA3EsB;AlCg6E1B;AkCvrEI;EACE,yBAAA;EACA,cA3P2B;AlCo7EjC;AkCrrEE;;EAEE,yBAAA;EACA,cAzQsB;AlCg8E1B;;AiCn9EE;EADF;IAEI,2BAAA;EjCu9EF;AACF;;AiCn9EE;EACE,yBAAA;EACA,gB9GkTqB;A6EoqEzB;;AiCj9EE;EADF;IAEI,wBAAA;EjCq9EF;AACF;;AqCv+EA;EACE,iBAAA;ArC0+EF;;AqCr+EA;EACE,SAAA;EACA,SAAA;EACA,UAAA;ArCw+EF;;AqCh+EA;EACE,mBAAA;ArCm+EF;;AqCv8EA;EACE,SAAA;EACA,8BAAA;UAAA,sBAAA;EACA,cAAA;EACA,cAAA;EACA,SAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;ArC08EF;;AqCr8EA;EACE,gBAAA;ArCw8EF;;AqC77EA;EACE,cAAA;ArCg8EF;;AsC3gFE;EACE,aAAA;EACA,SAAA;AtC8gFJ;;AuCjhFA;EACE,qBAAA;AvCohFF;;AwCrhFA;EACE,SAAA;AxCwhFF;;AyCzhFA;EACE,SAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;AzC4hFF;AyC1hFE;EAPF;IAQI,0BAAA;IACA,wBAAA;EzC6hFF;AACF;;A0CtiFE;EACE,gBAAA;A1CyiFJ;;A2CtiFA;EACE,cAAA;EACA,kBAAA;A3CyiFF","file":"document.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","@use \"../settings\" as *;\n@use \"../functions/utilities\" as *;\n@use \"../mixins/utilities/margin\" as *;\n\n%usa-list {\n @include u-margin-y(1em);\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n padding-left: 3ch;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ul,\n ol {\n margin-top: 0.25em;\n }\n}\n\n%usa-list-item {\n margin-bottom: 0.25em;\n max-width: measure($theme-text-measure);\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Adds margin either l/r(x) or t/b(y)\n\n@mixin margin-n($side, $value...) {\n $value: unpack($value);\n @if $side == all {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin: get-uswds-value(margin, $value...) #{$important};\n } @else if $side == x {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-left: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n margin-right: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n } @else if $side == y {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-bottom: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n margin-top: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == t {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-top: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == r {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-right: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n } @else if $side == b {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-bottom: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == l {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-left: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n }\n}\n\n@mixin u-margin($value...) {\n @include margin-n(all, $value...);\n}\n\n@mixin u-margin-x($value...) {\n @include margin-n(x, $value...);\n}\n\n@mixin u-margin-y($value...) {\n @include margin-n(y, $value...);\n}\n\n@mixin u-margin-top($value...) {\n @include margin-n(t, $value...);\n}\n\n@mixin u-margin-right($value...) {\n @include margin-n(r, $value...);\n}\n\n@mixin u-margin-bottom($value...) {\n @include margin-n(b, $value...);\n}\n\n@mixin u-margin-left($value...) {\n @include margin-n(l, $value...);\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\nol, ul {\n margin-bottom: 1em;\n margin-top: 1em;\n line-height: 1.5;\n padding-left: 3ch;\n}\nol:last-child, ul:last-child {\n margin-bottom: 0;\n}\nol ul, ul ul,\nol ol,\nul ol {\n margin-top: 0.25em;\n}\n\nli {\n margin-bottom: 0.25em;\n max-width: 68ex;\n}\nli:last-child {\n margin-bottom: 0;\n}\n\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n* {\n transition-duration: 200ms;\n transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform;\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important;\n text-shadow: none !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n[id] {\n scroll-margin-top: 1em;\n}\n\nhtml {\n font-feature-settings: \"kern\" 1;\n font-kerning: normal;\n font-size: 100%;\n min-height: 100%;\n}\n\nbody {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.5;\n background-color: #fff;\n color: #1b1b1b;\n margin: 0;\n padding: 0;\n word-wrap: break-word;\n}\nbody.has-open-mobile-menu {\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n}\n\n@media print {\n nav {\n display: none;\n }\n}\n\nsummary {\n display: list-item;\n}\n\niframe {\n border: 0;\n max-width: 100%;\n}\n@media print {\n iframe {\n display: none;\n }\n}\n\nh6,\n.h6, h5,\n.h5, h4,\n.h4, h3,\n.h3, h2,\n.h2, h1 {\n margin-bottom: 0;\n margin-top: 0;\n clear: none;\n margin-bottom: 1rem;\n clear: none;\n hyphens: none;\n text-rendering: optimizeLegibility;\n}\n* + h6,\n* + .h6, * + h5,\n* + .h5, * + h4,\n* + .h4, * + h3,\n* + .h3, * + h2,\n* + .h2, * + h1 {\n margin-top: 1em;\n}\n@media print {\n h6,\n.h6, h5,\n.h5, h4,\n.h4, h3,\n.h3, h2,\n.h2, h1 {\n orphans: 3;\n page-break-after: avoid;\n widows: 3;\n }\n h6::after,\n.h6::after, h5::after,\n.h5::after, h4::after,\n.h4::after, h3::after,\n.h3::after, h2::after,\n.h2::after, h1::after {\n display: inline-block;\n }\n}\n\nh1 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 2.44rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h1 {\n font-size: 1.95rem;\n }\n}\n\nh2,\n.h2 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.95rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h2,\n.h2 {\n font-size: 1.34rem;\n }\n}\n\nh3,\n.h3 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.34rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h3,\n.h3 {\n font-size: 1.1rem;\n }\n}\n\nh4,\n.h4 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 0.98rem;\n font-weight: 700;\n line-height: 1.2;\n}\n\nh5,\n.h5 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 0.91rem;\n font-weight: 700;\n line-height: 1.2;\n}\n\nh6,\n.h6 {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 0.87rem;\n font-weight: normal;\n letter-spacing: 0.025em;\n line-height: 1.1;\n text-transform: uppercase;\n}\n\np {\n line-height: 1.5;\n margin-bottom: 1rem;\n margin-top: 0;\n}\n@media print {\n p {\n orphans: 3;\n widows: 3;\n }\n}\np:empty {\n margin: 0 !important;\n}\n\na {\n background-color: transparent;\n color: #005ea2;\n -webkit-text-decoration-skip: objects;\n}\na:visited {\n color: #54278f;\n}\na:hover, a:focus {\n color: #1a4480;\n}\na:active {\n color: #162e51;\n}\n@media print {\n a, a:visited {\n text-decoration: none;\n }\n a[href]::after {\n content: \" <\" attr(href) \">\";\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 10pt;\n font-weight: normal;\n text-transform: lowercase;\n }\n a[href^=\"/\"]::after {\n content: \" \";\n }\n a[href^=\"javascript:\"]::after, a[href^=\"mailto:\"]::after, a[href^=\"tel:\"]::after, a[href^=\"#\"]::after, a[href*=\"?\"]::after {\n content: \"\";\n }\n}\n\nabbr[title] {\n border-bottom: 1px dotted;\n text-decoration: none;\n}\n@media (min-width: max-width 40rem) {\n abbr[title] {\n border-bottom: 0;\n }\n abbr[title]::after {\n content: \" (\" attr(title) \")\";\n }\n}\nabbr:hover {\n cursor: help;\n}\n@media print {\n abbr[title] {\n border-bottom: 0;\n }\n abbr[title]::after {\n content: \" (\" attr(title) \")\";\n }\n}\n\ncite {\n color: #565c65;\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 0.93rem;\n font-style: normal;\n font-weight: normal;\n letter-spacing: 0.025em;\n line-height: 1.6;\n}\n\ndfn {\n font-style: normal;\n}\n\nins {\n text-decoration: none;\n}\n\nmark {\n background: #ff0;\n color: #000;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\nvar {\n font-style: normal;\n}\n\nblockquote {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.1rem;\n font-weight: normal;\n line-height: 1.7;\n background-color: #fff;\n border-left: 0.5rem solid #00bde3;\n clear: both;\n margin: 0 0 1.5rem;\n padding: 1.25rem 0 1.25rem 1.25rem;\n}\nblockquote > :last-child {\n margin-bottom: 0;\n}\n* + blockquote {\n margin-top: 1.5rem;\n}\n\nblockquote cite {\n display: block;\n margin: 1rem 0;\n text-align: left;\n}\n\nblockquote p {\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\nblockquote cite em {\n border-left: 1px solid #71767a;\n font-weight: normal;\n margin-left: 0.25rem;\n padding-left: 0.5rem;\n}\n@media print {\n blockquote {\n page-break-inside: avoid;\n }\n}\n\npre {\n margin: 0 0 1rem;\n overflow: auto;\n}\n* + pre {\n margin-top: 1rem;\n}\n@media print {\n pre {\n page-break-inside: avoid;\n }\n}\n\nhr {\n border-top: solid #a9aeb1;\n border-width: 1px 0 0;\n box-sizing: content-box;\n height: 0;\n margin: 0 0 1.5rem;\n overflow: auto;\n}\n* + hr {\n margin-top: 1.5rem;\n}\n\naddress {\n font-style: normal;\n}\n\nul {\n list-style-type: disc;\n margin-top: 0;\n}\n[dir=rtl] ul {\n padding-left: 0;\n padding-right: 3ch;\n}\nul:last-child {\n margin-bottom: revert;\n}\nul ol,\nul ul {\n margin-top: 0.5rem;\n}\nul ul {\n list-style-type: circle;\n}\nul ul ul {\n list-style-type: square;\n}\n\nol {\n margin-top: 0;\n}\n[dir=rtl] ol {\n padding-left: 0;\n padding-right: 3ch;\n}\nol:last-child {\n margin-bottom: revert;\n}\nol ol,\nol ul {\n margin-top: 0.5rem;\n}\nol ol {\n list-style-type: lower-alpha;\n}\nol ol ol {\n list-style-type: lower-roman;\n}\n\nli {\n max-width: unset;\n}\n@media print {\n li {\n page-break-inside: avoid;\n }\n}\n\ndd {\n margin: 0 0 1rem 3ch;\n}\n[dir=rtl] dd {\n margin-left: 0;\n margin-right: 3ch;\n}\n\ndl {\n margin: 0 0 1rem;\n}\n\ntable {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.5;\n border-collapse: collapse;\n border-spacing: 0;\n color: #1b1b1b;\n margin: 1.25rem 0;\n text-align: left;\n /* stylelint-disable selector-class-pattern */\n /* stylelint-enable selector-class-pattern */\n}\ntable thead th {\n background-clip: padding-box;\n color: #1b1b1b;\n font-weight: 700;\n line-height: 1.3;\n}\ntable thead th,\ntable thead td {\n background-color: #dfe1e2;\n color: #1b1b1b;\n}\ntable tbody th {\n text-align: left;\n}\ntable th,\ntable td {\n background-color: white;\n border: 1px solid #1b1b1b;\n font-weight: normal;\n padding: 0.5rem 1rem;\n}\ntable caption {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1rem;\n font-weight: 700;\n margin-bottom: 0.75rem;\n text-align: left;\n}\ntable th[data-sortable] {\n padding-right: 2.5rem;\n position: relative;\n}\ntable th[data-sortable]::after {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-bottom-width: 1px;\n bottom: 0;\n content: \"\";\n height: 0;\n left: 0;\n position: absolute;\n width: 100%;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button, table th[data-sortable][aria-sort=none] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:visited, table th[data-sortable][aria-sort=none] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g.unsorted {\n fill: #1b1b1b;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover .usa-icon > g.unsorted {\n fill: black;\n}\ntable th[data-sortable][aria-sort=descending], table th[data-sortable][aria-sort=ascending] {\n background-color: #97d4ea;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g.descending {\n fill: #1b1b1b;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g.ascending {\n fill: #1b1b1b;\n}\ntable thead th[aria-sort] {\n background-color: #97d4ea;\n color: #1b1b1b;\n}\ntable td[data-sort-active],\ntable th[data-sort-active] {\n background-color: #e1f3f8;\n color: #1b1b1b;\n}\n\n@media print {\n thead {\n display: table-header-group;\n }\n}\n\ntbody th {\n background-color: #f0f0f0;\n font-weight: 700;\n}\n\n@media print {\n tr {\n page-break-inside: avoid;\n }\n}\n\nbutton {\n overflow: visible;\n}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\ninput {\n line-height: normal;\n}\n\nlegend {\n border: 0;\n box-sizing: border-box;\n color: inherit;\n display: table;\n margin: 0;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\noptgroup {\n font-weight: 700;\n}\n\ntextarea {\n overflow: auto;\n}\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\ncanvas {\n display: inline-block;\n}\n\nfigure {\n margin: 0;\n}\n\nimg {\n border: 0;\n font-style: italic;\n height: auto;\n max-width: 100%;\n vertical-align: middle;\n}\n@media print {\n img {\n max-width: 100% !important;\n page-break-inside: avoid;\n }\n}\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n.document__meta {\n color: #565c65;\n font-size: 0.93rem;\n}","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Universal styles.\n\n@use '../../../00-config' as *;\n\n* {\n transition-duration: gesso-duration(short);\n transition-property: background-color, border-color, box-shadow, color,\n opacity, text-shadow, transform;\n transition-timing-function: gesso-easing(ease-in);\n}\n\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important;\n text-shadow: none !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n\n[id] {\n scroll-margin-top: 1em;\n}\n","// @file\n// HTML styles.\n\n@use 'sass:math';\n@use '../../../00-config' as *;\n\nhtml {\n @include add-kerning();\n font-size: 100% * math.div(gesso-base-font-size(), 16px);\n min-height: 100%;\n}\n","@mixin add-kerning {\n font-feature-settings: \"kern\" 1;\n font-kerning: normal;\n}\n","// @file\n// Body styles.\n\n@use '../../../00-config' as *;\n\nbody {\n @include typeset();\n background-color: gesso-color(background, site);\n color: gesso-color(text, primary);\n margin: 0;\n padding: 0;\n word-wrap: break-word;\n\n // stylelint-disable selector-no-qualifying-type\n &.has-open-mobile-menu {\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n }\n // stylelint-enable\n\n // Tweak styling in WYSIWYG editor.\n @if $wysiwyg {\n padding: 0 rem(gesso-site-margins(desktop));\n }\n}\n","// @file\n// Nav element styles.\n\nnav {\n @media print {\n display: none;\n }\n}\n","// @file\n// Details element styles.\n\n// details {}\n\nsummary {\n display: list-item;\n}\n","// @file\n// Iframe element styles.\n\niframe {\n border: 0;\n max-width: 100%;\n\n @media print {\n display: none;\n }\n}\n","// @file\n// Heading styles.\n\n@use '../../../00-config' as *;\n\n%hN {\n @include typeset-heading();\n clear: none;\n hyphens: none;\n text-rendering: optimizeLegibility;\n\n @media print {\n orphans: 3;\n page-break-after: avoid;\n widows: 3;\n\n &::after {\n display: inline-block;\n }\n }\n}\n\nh1,\n%h1 {\n @extend %hN;\n @include display-text-style(h1);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, xl);\n }\n}\n\nh2,\n.h2,\n%h2 {\n @extend %hN;\n @include display-text-style(h2);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, lg);\n }\n}\n\nh3,\n.h3,\n%h3 {\n @extend %hN;\n @include display-text-style(h3);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, md);\n }\n}\n\nh4,\n.h4,\n%h4 {\n @extend %hN;\n @include display-text-style(h4);\n}\n\nh5,\n.h5,\n%h5 {\n @extend %hN;\n @include display-text-style(h5);\n}\n\nh6,\n.h6,\n%h6 {\n @extend %hN;\n @include display-text-style(h6);\n}\n","// @file\n// Overrides for USWDS typography mixins\n\n@use '../../00-functions' as *;\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: none;\n margin-bottom: rem(gesso-spacing(2));\n\n * + & {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: rem(gesso-spacing(2));\n margin-top: 0;\n}\n","// @file\n// Display text styles\n\n@use '../00-functions' as *;\n\n@mixin display-text-style($keys...) {\n $display: gesso-get-map(typography, display, $keys...);\n\n @each $property, $value in $display {\n @if ($property == 'font-size') {\n // Check for px if not output value.\n #{$property}: #{rem(convert($value))};\n } @else {\n #{$property}: #{$value};\n }\n }\n}\n","// Mixins: Breakpoint\n// A 16px base value is passed to em() functions within breakpoint mixins due\n// to browsers not using the Gesso base font size for media query calculations.\n\n@use 'sass:string';\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n\n// Create a min-width media query.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint-min($breakpoint) {\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (min-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Assume min-width if shorthand breakpoint mixin is used.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint($breakpoint) {\n @include breakpoint-min($breakpoint) {\n @content;\n }\n}\n\n// Create a max-width media query.\n// @param {Number} $breakpoint - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint value.\n@mixin breakpoint-max($breakpoint, $subtract_1_from_max: false) {\n @if $subtract_1_from_max {\n $breakpoint: px($breakpoint) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (max-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Create a media query with both min-width and max-width.\n// @param {Number} $breakpoint-min - width value.\n// @param {Number} $breakpoint-max - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint-max value.\n@mixin breakpoint-min-max(\n $breakpoint-min,\n $breakpoint-max,\n $subtract_1_from_max: false\n) {\n @if $subtract_1_from_max {\n $breakpoint-max: px($breakpoint-max) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint-min: em($breakpoint-min, 16px);\n $breakpoint-max: em($breakpoint-max, 16px);\n }\n @media (min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max}) {\n @content;\n }\n}\n","// @file\n// Paragraph styles.\n\n@use '../../../00-config' as *;\n\np {\n @include typeset-p();\n\n @media print {\n orphans: 3;\n widows: 3;\n }\n\n // Hide empty paragraphs except in WYSIWYG editor.\n @if not $wysiwyg {\n &:empty {\n margin: 0 !important;\n }\n }\n}\n","// @file\n// Inline element styles.\n\n@use '../../../00-config' as *;\n\na {\n background-color: transparent;\n color: gesso-color(text, link);\n -webkit-text-decoration-skip: objects;\n\n &:visited {\n color: gesso-color(text, link-visited);\n }\n\n &:hover,\n &:focus {\n color: gesso-color(text, link-hover);\n }\n\n &:active {\n color: gesso-color(text, link-active);\n }\n\n @media print {\n &,\n &:visited {\n text-decoration: none;\n }\n\n &[href]::after {\n content: ' <' attr(href) '>';\n font-family: font-family(body);\n font-size: 10pt;\n font-weight: normal;\n text-transform: lowercase;\n }\n\n &[href^='/']::after {\n content: ' ';\n }\n\n &[href^='javascript:']::after,\n &[href^='mailto:']::after,\n &[href^='tel:']::after,\n &[href^='#']::after,\n &[href*='?']::after {\n content: '';\n }\n }\n}\n\nabbr {\n &[title] {\n border-bottom: 1px dotted;\n text-decoration: none;\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n border-bottom: 0;\n\n &::after {\n content: ' (' attr(title) ')';\n }\n }\n }\n\n &:hover {\n cursor: help;\n }\n\n @media print {\n &[title] {\n border-bottom: 0;\n\n &::after {\n content: ' (' attr(title) ')';\n }\n }\n }\n}\n\n// b {}\n\ncite {\n @include display-text-style(cite);\n}\n\n// code {}\n\n// del {}\n\ndfn {\n font-style: normal;\n}\n\n// em {}\n\n// i {}\n\nins {\n text-decoration: none;\n}\n\n// kbd {}\n\nmark {\n background: #ff0;\n color: #000;\n}\n\n// q {}\n\n// s {}\n\n// samp {}\n\nsmall {\n font-size: 80%;\n}\n\n// strong {}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n// time {}\n\n// u {}\n\nvar {\n font-style: normal;\n}\n","// @file\n// Blockquote styles.\n\n@use '../../../00-config' as *;\n\n$blockquote-cite-divider-color: gesso-color(ui, generic, border);\n\n%pull-quote {\n @include display-text-style(blockquote);\n background-color: gesso-grayscale(white);\n border-left: rem(units(1)) solid gesso-brand(aqua, base);\n clear: both;\n margin: 0 0 rem(gesso-spacing(3));\n padding: rem(units($theme-alert-padding-x)) 0\n rem(units($theme-alert-padding-x)) rem(units($theme-alert-padding-x));\n\n > :last-child {\n margin-bottom: 0;\n }\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(3));\n }\n}\n\n%pull-quote__cite {\n display: block;\n margin: rem(gesso-spacing(2)) 0;\n text-align: left;\n}\n\nblockquote {\n @extend %pull-quote;\n\n p {\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n\n cite {\n @extend %pull-quote__cite;\n\n em {\n border-left: 1px solid $blockquote-cite-divider-color;\n font-weight: font-weight(normal);\n margin-left: rem(gesso-spacing('05'));\n padding-left: rem(gesso-spacing(1));\n }\n }\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Preformatted text styles.\n\n@use '../../../00-config' as *;\n\npre {\n margin: 0 0 rem(gesso-spacing(2));\n overflow: auto;\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(2));\n }\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Horizontal rule styles.\n\n@use '../../../00-config' as *;\n\nhr {\n border-top: solid gesso-grayscale(gray-3);\n border-width: 1px 0 0;\n box-sizing: content-box;\n height: 0;\n margin: 0 0 rem(gesso-spacing(3));\n overflow: auto;\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(3));\n }\n}\n","// @file\n// Address element styles.\n\naddress {\n font-style: normal;\n}\n","// @file\n// Unordered list styles.\n\n@use '../../../00-config' as *;\n\nul {\n @extend %usa-list;\n list-style-type: disc;\n margin-top: 0;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n padding-left: 0;\n padding-right: 3ch;\n }\n }\n\n &:last-child {\n margin-bottom: revert;\n }\n\n ol,\n ul {\n margin-top: rem(gesso-spacing(1));\n }\n\n ul {\n list-style-type: circle;\n\n ul {\n list-style-type: square;\n }\n }\n}\n","// @file\n// Ordered list styles.\n\n@use '../../../00-config' as *;\n\nol {\n @extend %usa-list;\n margin-top: 0;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n padding-left: 0;\n padding-right: 3ch;\n }\n }\n\n &:last-child {\n margin-bottom: revert;\n }\n\n ol,\n ul {\n margin-top: rem(gesso-spacing(1));\n }\n\n ol {\n list-style-type: lower-alpha;\n\n ol {\n list-style-type: lower-roman;\n }\n }\n}\n","// @file\n// List item styles.\n\n@use '../../../00-config' as *;\n\nli {\n @extend %usa-list-item;\n max-width: unset;\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Definition list styles.\n\n@use '../../../00-config' as *;\n\ndd {\n margin: 0 0 rem(gesso-spacing(2)) 3ch;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n margin-left: 0;\n margin-right: 3ch;\n }\n }\n}\n\ndl {\n margin: 0 0 rem(gesso-spacing(2));\n}\n\n// dt {}\n","// @file\n// Table styles.\n\n@use '../../../00-config' as *;\n\ntable {\n @include usa-table();\n}\n\nthead {\n @media print {\n display: table-header-group;\n }\n}\n\ntbody {\n th {\n background-color: color('base-lightest');\n font-weight: $theme-font-weight-bold;\n }\n}\n\ntr {\n @media print {\n page-break-inside: avoid;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"button-unstyled\" as *;\n@use \"../helpers\" as *;\n@use \"../utilities\" as *;\n@use \"../typography/typeset\" as *;\n\n$table-text-color: get-color-token-from-bg(\n $bg-color: $theme-body-background-color,\n $preferred-text-token: $theme-table-text-color,\n $context: \"Table text\",\n);\n\n$table-header-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-header-background-color,\n $preferred-text-token: $theme-table-header-text-color,\n $context: \"Table header text\",\n )\n);\n\n$table-stripe-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-stripe-background-color,\n $preferred-text-token: $theme-table-stripe-text-color,\n $context: \"Table stripe text\",\n )\n);\n\n$table-sorted-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-background-color,\n $context: \"Table sorted text\",\n )\n);\n\n$table-sorted-header-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-header-background-color,\n $preferred-text-token: $theme-table-header-text-color,\n $context: \"Table sorted header text\",\n )\n);\n\n$table-sorted-stripe-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-stripe-background-color,\n $preferred-text-token: $theme-table-stripe-text-color,\n $context: \"Table sorted stripe text\",\n )\n);\n\n$table-sorted-icon-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-header-background-color,\n $preferred-text-token: $theme-table-sorted-icon-color,\n $context: \"Table sorted icon\",\n )\n);\n\n$table-unsorted-icon-color: get-color-token-from-bg(\n $bg-color: $theme-table-header-background-color,\n $preferred-text-token: $theme-table-unsorted-icon-color,\n $context: \"Table unsorted icon\",\n);\n\n\n// Shared table styles\n@mixin table-header-unsorted-styles {\n padding-right: units(5);\n position: relative;\n &::after {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-bottom-width: units(1px);\n bottom: 0;\n content: \"\";\n height: 0;\n left: 0;\n position: absolute;\n width: 100%;\n }\n}\n\n@mixin table-button-default-styles {\n @include button-unstyled;\n @include u-square(4);\n background-position: center center;\n background-size: units(3);\n color: color($theme-table-unsorted-icon-color);\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n // vertically center button within table header\n top: 50%;\n transform: translate(0, -50%);\n .usa-icon {\n @include u-square(3);\n vertical-align: middle;\n & > g {\n fill: transparent;\n }\n }\n}\n\n// The SVG in the sortable column button contains three icon shapes.\n// This CSS controls which of the shapes is 'filled' when active.\n\n@mixin table-button-unsorted-styles {\n @include table-button-default-styles;\n .usa-icon > g.unsorted {\n fill: color($table-unsorted-icon-color);\n }\n &:hover .usa-icon > g.unsorted {\n fill: color(\n next-token($table-unsorted-icon-color, \"darker\")\n )\n }\n}\n\n@mixin table-button-sorted-ascending-styles {\n @include table-button-default-styles;\n .usa-icon > g.ascending {\n fill: $table-sorted-icon-color;\n }\n}\n\n@mixin table-button-sorted-descending-styles {\n @include table-button-default-styles;\n .usa-icon > g.descending {\n fill: $table-sorted-icon-color;\n }\n}\n\n@mixin table-stacked-styles {\n thead {\n display: none;\n }\n\n th,\n td {\n border-bottom-width: 0;\n display: block;\n width: 100%;\n }\n\n tr {\n border-bottom: units(0.5) solid color($theme-table-border-color);\n border-top-width: 0;\n display: block;\n width: 100%;\n th:first-child,\n td:first-child {\n border-top-width: 0;\n }\n &:nth-child(odd) {\n td,\n th {\n background-color: inherit;\n }\n }\n\n &:first-child {\n th:first-child,\n td:first-child {\n border-top: units(0.5) solid color($theme-table-border-color);\n }\n }\n }\n\n th[data-label],\n td[data-label] {\n padding-bottom: units(1.5);\n\n &:before {\n content: attr(data-label);\n display: block;\n font-weight: fw(\"bold\");\n margin: units(-1) units(-2) units(0);\n padding: units(1.5) units(2) units(0.5);\n }\n }\n}\n\n@mixin table-stacked-header-styles {\n tr {\n td:first-child,\n th:first-child {\n @include typeset(\n $theme-body-font-family,\n $theme-h4-font-size,\n $theme-heading-line-height\n );\n background-color: color($theme-table-header-background-color);\n color: $table-header-text-color;\n font-weight: fw(\"bold\");\n padding: units(1.5) units(2);\n &:before {\n display: none;\n }\n }\n }\n}\n\n@mixin usa-table {\n @include border-box-sizing;\n @include typeset;\n border-collapse: collapse;\n border-spacing: 0;\n color: color($table-text-color);\n margin: units(2.5) 0;\n text-align: left;\n\n thead {\n th {\n background-clip: padding-box;\n color: $table-header-text-color;\n font-weight: fw(\"bold\");\n line-height: line-height(\n $theme-body-font-family,\n $theme-input-line-height\n );\n }\n\n th,\n td {\n background-color: color($theme-table-header-background-color);\n color: $table-header-text-color;\n }\n }\n tbody {\n th {\n text-align: left;\n }\n }\n th,\n td {\n background-color: color($theme-body-background-color);\n border: 1px solid color($theme-table-border-color);\n font-weight: fw(\"normal\");\n padding: units(1) units(2);\n }\n\n caption {\n @include u-font(\"body\", \"xs\");\n font-weight: fw(\"bold\");\n margin-bottom: units(1.5);\n text-align: left;\n }\n\n /* stylelint-disable selector-class-pattern */\n th[data-sortable] {\n @include table-header-unsorted-styles;\n\n &:not([aria-sort]),\n &[aria-sort=\"none\"] {\n .usa-table__header__button {\n @include table-button-unsorted-styles;\n }\n }\n\n &[aria-sort=\"descending\"],\n &[aria-sort=\"ascending\"] {\n background-color: color($theme-table-sorted-header-background-color);\n }\n\n &[aria-sort=\"descending\"] {\n .usa-table__header__button {\n @include table-button-sorted-descending-styles;\n }\n }\n\n &[aria-sort=\"ascending\"] {\n .usa-table__header__button {\n @include table-button-sorted-ascending-styles;\n }\n }\n }\n /* stylelint-enable selector-class-pattern */\n\n thead {\n th[aria-sort] {\n background-color: color($theme-table-sorted-header-background-color);\n color: $table-sorted-header-text-color;\n }\n }\n\n td[data-sort-active],\n th[data-sort-active] {\n background-color: color($theme-table-sorted-background-color);\n color: $table-sorted-text-color;\n }\n}\n\n\n@mixin usa-table--borderless {\n thead {\n th {\n background-color: transparent;\n border-top: 0;\n color: color($table-text-color);\n\n &[aria-sort] {\n color: $table-sorted-header-text-color;\n }\n }\n /* stylelint-disable selector-class-pattern */\n th[data-sortable]:not([aria-sort]) {\n .usa-table__header__button .usa-icon > g.unsorted {\n fill: color($table-text-color);\n }\n\n .usa-table__header__button:hover .usa-icon > g.unsorted {\n fill: color(\n next-token($table-text-color, \"darker\")\n );\n }\n }\n /* stylelint-enable selector-class-pattern */\n }\n\n th,\n td {\n border-left: 0;\n border-right: 0;\n }\n}\n\n@mixin usa-table--compact {\n th,\n td {\n padding: units(0.5) units(1.5);\n }\n}\n\n@mixin usa-table--striped {\n tbody {\n tr:nth-child(odd) {\n td,\n th {\n background-color: color($theme-table-stripe-background-color);\n color: $table-stripe-text-color;\n &[data-sort-active] {\n background-color: color($theme-table-sorted-stripe-background-color);\n color: $table-sorted-stripe-text-color;\n }\n }\n }\n }\n}\n\n@mixin usa-table--stacked {\n @include table-stacked-styles;\n}\n\n@mixin usa-table--stacked-header {\n @include table-stacked-styles;\n @include table-stacked-header-styles;\n}\n\n@mixin usa-table-container--scrollable {\n margin: units(2.5) 0;\n overflow-y: hidden;\n\n .usa-table {\n margin: 0;\n }\n\n td {\n white-space: nowrap;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs height\n\n@mixin u-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n height: get-uswds-value(\"height\", $value...) #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs width\n\n@mixin u-width($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n width: get-uswds-value(\"width\", $value...) #{$important};\n}\n","// @file\n// Form element styles.\n\n@use '../../../00-config' as *;\n\n// Don’t style button elements, since they’re often styled as links for\n// accessible widgets. Use the .button class in components/button.\nbutton {\n overflow: visible;\n}\n\n// datalist {}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n// form {}\n\n// Don't style button, submit, or reset elements, since they're often styled as\n// links for accessible widgets. Use the .button class in\n// partials/components/button.\ninput {\n line-height: normal;\n}\n\n// input[type='button'] {}\n// input[type='checkbox'] {}\n// input[type='color'] {}\n// input[type='date'] {}\n// input[type='datetime'] {}\n// input[type='datetime-local'] {}\n// input[type='email'] {}\n// input[type='file'] {}\n// input[type='image'] {}\n// input[type='month'] {}\n// input[type='number'] {}\n// input[type='password'] {}\n// input[type='radio'] {}\n// input[type='range'] {}\n// input[type='reset'] {}\n// input[type='search'] {}\n// input[type='submit'] {}\n// input[type='tel'] {}\n// input[type='text'] {}\n// input[type='time'] {}\n// input[type='url'] {}\n// input[type='week'] {}\n\n// label {}\n\nlegend {\n border: 0;\n box-sizing: border-box;\n color: inherit;\n display: table;\n margin: 0;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\n// meter {}\n\noptgroup {\n font-weight: font-weight(bold);\n}\n\n// option {}\n\n// output {}\n\n// progress {}\n\n// select {}\n\ntextarea {\n overflow: auto;\n}\n","// @file\n// Audio element styles.\n\naudio {\n &:not([controls]) {\n display: none;\n height: 0;\n }\n}\n","// @file\n// Canvas element styles.\n\ncanvas {\n display: inline-block;\n}\n","// @file\n// Figure element styles.\n\nfigure {\n margin: 0;\n}\n\n// figcaption {}\n","// @file\n// IMG element styles.\n\nimg {\n border: 0;\n font-style: italic; // Makes alt text stand out from surrounding text.\n height: auto;\n max-width: 100%;\n vertical-align: middle;\n\n @media print {\n max-width: 100% !important;\n page-break-inside: avoid;\n }\n}\n","// @file\n// SVG element styles.\n\nsvg {\n &:not(:root) {\n overflow: hidden;\n }\n}\n","// @file\n// Styles for Document.\n\n@use '../../00-config' as *;\n@use '../../02-base' as *;\n\n// .document {}\n\n.document__meta {\n color: gesso-color(text, secondary);\n font-size: font-size(body, 2xs);\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/dropbutton/dropbutton.css b/services/drupal/web/themes/epa_theme/css/dropbutton/dropbutton.css new file mode 100644 index 0000000000..7561815b29 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/dropbutton/dropbutton.css @@ -0,0 +1,1947 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button, .dropbutton__toggle-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button, .dropbutton__toggle-button { + width: auto; + } +} +.usa-button:visited, .dropbutton__toggle-button:visited { + color: white; +} +.usa-button:hover, .dropbutton__toggle-button:hover, .usa-button.usa-button--hover, .usa-button--hover.dropbutton__toggle-button { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .dropbutton__toggle-button:active, .usa-button.usa-button--active, .usa-button--active.dropbutton__toggle-button { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .dropbutton__toggle-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus, .dropbutton__toggle-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled, .dropbutton__toggle-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .dropbutton__toggle-button:disabled:hover, .usa-button:disabled.usa-button--hover, .dropbutton__toggle-button:disabled.usa-button--hover, .usa-button:disabled:active, .dropbutton__toggle-button:disabled:active, .usa-button:disabled.usa-button--active, .dropbutton__toggle-button:disabled.usa-button--active, .usa-button:disabled:focus, .dropbutton__toggle-button:disabled:focus, .usa-button:disabled.usa-focus, .dropbutton__toggle-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +.dropbutton { + display: inline-block; + margin-bottom: 0.5rem; + position: relative; + vertical-align: top; +} +.dropbutton.has-multiple { + padding-right: 2em; +} +[dir=rtl] .dropbutton.has-multiple { + padding-left: 2em; + padding-right: 0; +} +.dropbutton.is-open .dropbutton__item { + display: block; +} +.dropbutton.is-open .dropbutton__item:first-child .dropbutton__button { + border-bottom-left-radius: 0; +} +.dropbutton.is-open .dropbutton__toggle-button { + background-image: url("../images/dropbutton-arrow-up.svg"); +} +.dropbutton + .dropbutton, +.dropbutton + .button, .button + .dropbutton { + margin-left: 0.5em; +} +[dir=rtl] .dropbutton + .dropbutton, +[dir=rtl] .dropbutton + .button, [dir=rtl] .button + .dropbutton { + margin-left: 0; + margin-right: 0.5em; +} + +.dropbutton__list { + list-style-type: none; + margin: 0; + padding: 0; +} +.dropbutton__list:last-child { + margin-bottom: 0; +} +.dropbutton__list li { + margin: 0; + padding-left: 0; +} +.dropbutton__list li::before { + display: none; +} + +.dropbutton__toggle { + bottom: 0; + margin: 0; + padding: 0; + position: absolute; + right: 0; + top: 0; + width: 2em; +} + +.dropbutton__toggle-button { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ + background-color: #005ea2; + border-radius: 0.25rem; + color: #fff; + display: inline-block; + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1rem; + -webkit-transition: background 200ms cubic-bezier(0.4, 0, 1, 1); + transition: background 200ms cubic-bezier(0.4, 0, 1, 1); + vertical-align: top; + white-space: normal; + background-image: url("../images/dropbutton-arrow-down.svg"); + background-position: 50% 1rem; + background-repeat: no-repeat; + background-size: 0.75rem; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + height: 100%; + padding: 0; + white-space: nowrap; + width: 100%; +} +.dropbutton__toggle-button:visited { + color: #fff; +} +.dropbutton__toggle-button:hover, .dropbutton__toggle-button:focus { + background-color: #1a4480; + color: #fff; +} +.dropbutton__toggle-button:active { + background-color: #162e51; + color: #fff; +} +.dropbutton__toggle-button[disabled] { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; + background-color: #c9c9c9; + color: #fff; +} +.dropbutton__toggle-button[disabled]:hover, .dropbutton__toggle-button[disabled].usa-button--hover, .dropbutton__toggle-button[disabled]:active, .dropbutton__toggle-button[disabled].usa-button--active, .dropbutton__toggle-button[disabled]:focus, .dropbutton__toggle-button[disabled].usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.dropbutton__item { + margin: 0; + padding: 0; +} +.dropbutton__item.is-secondary-action { + display: none; +} +.dropbutton__item.is-secondary-action:not(:last-child) .dropbutton__button { + border-bottom-left-radius: 0; +} +.dropbutton__item:not(:first-child) .dropbutton__button { + border-top-left-radius: 0; +} + +.dropbutton .dropbutton__button { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + display: block; + margin: 0; + text-align: left; + width: 100%; +} +/*# sourceMappingURL=dropbutton.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/dropbutton/dropbutton.css.map b/services/drupal/web/themes/epa_theme/css/dropbutton/dropbutton.css.map new file mode 100644 index 0000000000..3471e04966 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/dropbutton/dropbutton.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","dropbutton/dropbutton.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","dropbutton/dropbutton.scss","../00-config/01-mixins/_mixins.svg-background.scss","../00-config/01-mixins/_mixins.list.scss","../00-config/01-mixins/_mixins.button.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AU7vDA;EACE,qBAAA;EACA,qBAAA;EACA,kBAAA;EACA,mBAAA;AVgwDF;AU9vDE;EACE,kBAVsB;AV0wD1B;AU7vDM;EACE,iBAdkB;EAelB,gBAAA;AV+vDR;AUzvDI;EACE,cAAA;AV2vDN;AUzvDM;EACE,4BAAA;AV2vDR;AUvvDI;EC7BF,0DAAA;AXuxDF;AUrvDE;;EAGE,kBAAA;AVsvDJ;AUnvDM;;EACE,cAAA;EACA,mBAAA;AVsvDR;;AUhvDA;EE/CE,qBAAA;EACA,SAAA;EACA,UAAA;AZmyDF;AYjyDE;EACE,gBAAA;AZmyDJ;AYhyDE;EACE,SAAA;EACA,eAAA;AZkyDJ;AYhyDI;EACE,aAAA;AZkyDN;;AU5vDA;EACE,SAAA;EACA,SAAA;EACA,UAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;EACA,UA3DwB;AV0zD1B;;AU5vDA;EG3BE,sEAAA;EAGA,yBArCwB;EAsCxB,sBAvCqB;EAwCrB,WAvBkB;EAwBlB,qBAAA;EACA,kRAAA;EACA,eAAA;EACA,+DAAA;EAAA,uDAAA;EACA,mBAAA;EACA,mBAAA;EF9CA,4DAAA;EDiEA,6BAAA;EAKA,4BAAA;EACA,wBAtE4B;EAuE5B,4BAAA;EACA,yBAAA;EACA,YAAA;EACA,UAAA;EACA,mBAAA;EACA,WAAA;AVowDF;AajyDE;EACE,WAhCgB;Abm0DpB;AahyDE;EAEE,yBA1C4B;EA2C5B,WAnCsB;Abo0D1B;Aa9xDE;EACE,yBAzD6B;EA0D7B,WA1CuB;Ab00D3B;Aa7xDE;EPrEA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;EMkEE,yBA1D+B;EA2D/B,WA/CyB;Abi1D7B;AOn2DE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APg2DJ;;AUzxDA;EACE,SAAA;EACA,UAAA;AV4xDF;AU1xDE;EACE,aAAA;AV4xDJ;AU1xDI;EACE,4BAAA;AV4xDN;AUxxDE;EACE,yBAAA;AV0xDJ;;AUrxDA;EACE,6BAAA;EACA,0BAAA;EACA,cAAA;EACA,SAAA;EACA,gBAAA;EACA,WAAA;AVwxDF","file":"dropbutton.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button, .dropbutton__toggle-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button, .dropbutton__toggle-button {\n width: auto;\n }\n}\n.usa-button:visited, .dropbutton__toggle-button:visited {\n color: white;\n}\n.usa-button:hover, .dropbutton__toggle-button:hover, .usa-button.usa-button--hover, .usa-button--hover.dropbutton__toggle-button {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .dropbutton__toggle-button:active, .usa-button.usa-button--active, .usa-button--active.dropbutton__toggle-button {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .dropbutton__toggle-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus, .dropbutton__toggle-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled, .dropbutton__toggle-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .dropbutton__toggle-button:disabled:hover, .usa-button:disabled.usa-button--hover, .dropbutton__toggle-button:disabled.usa-button--hover, .usa-button:disabled:active, .dropbutton__toggle-button:disabled:active, .usa-button:disabled.usa-button--active, .dropbutton__toggle-button:disabled.usa-button--active, .usa-button:disabled:focus, .dropbutton__toggle-button:disabled:focus, .usa-button:disabled.usa-focus, .dropbutton__toggle-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.dropbutton {\n display: inline-block;\n margin-bottom: 0.5rem;\n position: relative;\n vertical-align: top;\n}\n.dropbutton.has-multiple {\n padding-right: 2em;\n}\n[dir=rtl] .dropbutton.has-multiple {\n padding-left: 2em;\n padding-right: 0;\n}\n.dropbutton.is-open .dropbutton__item {\n display: block;\n}\n.dropbutton.is-open .dropbutton__item:first-child .dropbutton__button {\n border-bottom-left-radius: 0;\n}\n.dropbutton.is-open .dropbutton__toggle-button {\n background-image: url(\"../images/dropbutton-arrow-up.svg\");\n}\n.dropbutton + .dropbutton,\n.dropbutton + .button, .button + .dropbutton {\n margin-left: 0.5em;\n}\n[dir=rtl] .dropbutton + .dropbutton,\n[dir=rtl] .dropbutton + .button, [dir=rtl] .button + .dropbutton {\n margin-left: 0;\n margin-right: 0.5em;\n}\n\n.dropbutton__list {\n list-style-type: none;\n margin: 0;\n padding: 0;\n}\n.dropbutton__list:last-child {\n margin-bottom: 0;\n}\n.dropbutton__list li {\n margin: 0;\n padding-left: 0;\n}\n.dropbutton__list li::before {\n display: none;\n}\n\n.dropbutton__toggle {\n bottom: 0;\n margin: 0;\n padding: 0;\n position: absolute;\n right: 0;\n top: 0;\n width: 2em;\n}\n\n.dropbutton__toggle-button {\n /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */\n background-color: #005ea2;\n border-radius: 0.25rem;\n color: #fff;\n display: inline-block;\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1rem;\n transition: background 200ms cubic-bezier(0.4, 0, 1, 1);\n vertical-align: top;\n white-space: normal;\n background-image: url(\"../images/dropbutton-arrow-down.svg\");\n background-position: 50% 1rem;\n background-repeat: no-repeat;\n background-size: 0.75rem;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n height: 100%;\n padding: 0;\n white-space: nowrap;\n width: 100%;\n}\n.dropbutton__toggle-button:visited {\n color: #fff;\n}\n.dropbutton__toggle-button:hover, .dropbutton__toggle-button:focus {\n background-color: #1a4480;\n color: #fff;\n}\n.dropbutton__toggle-button:active {\n background-color: #162e51;\n color: #fff;\n}\n.dropbutton__toggle-button[disabled] {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n background-color: #c9c9c9;\n color: #fff;\n}\n.dropbutton__toggle-button[disabled]:hover, .dropbutton__toggle-button[disabled].usa-button--hover, .dropbutton__toggle-button[disabled]:active, .dropbutton__toggle-button[disabled].usa-button--active, .dropbutton__toggle-button[disabled]:focus, .dropbutton__toggle-button[disabled].usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.dropbutton__item {\n margin: 0;\n padding: 0;\n}\n.dropbutton__item.is-secondary-action {\n display: none;\n}\n.dropbutton__item.is-secondary-action:not(:last-child) .dropbutton__button {\n border-bottom-left-radius: 0;\n}\n.dropbutton__item:not(:first-child) .dropbutton__button {\n border-top-left-radius: 0;\n}\n\n.dropbutton .dropbutton__button {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n display: block;\n margin: 0;\n text-align: left;\n width: 100%;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for Drupal dropbuttons.\n\n@use 'sass:math';\n@use '../../00-config' as *;\n\n$dropbutton-toggle-height: rem(44px) !default;\n$dropbutton-toggle-width: 2em !default;\n$dropbutton-toggle-icon-size: rem(12px) !default;\n\n.dropbutton {\n display: inline-block;\n margin-bottom: rem(gesso-spacing(1));\n position: relative;\n vertical-align: top;\n\n &.has-multiple {\n padding-right: $dropbutton-toggle-width; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n padding-left: $dropbutton-toggle-width;\n padding-right: 0;\n }\n }\n }\n\n &.is-open {\n .dropbutton__item {\n display: block;\n\n &:first-child .dropbutton__button {\n border-bottom-left-radius: 0;\n }\n }\n\n .dropbutton__toggle-button {\n @include svg-background(dropbutton-arrow-up);\n }\n }\n\n & + &,\n + .button,\n .button + & {\n margin-left: 0.5em; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n margin-left: 0;\n margin-right: 0.5em;\n }\n }\n }\n}\n\n.dropbutton__list {\n @include list-clean();\n}\n\n.dropbutton__toggle {\n bottom: 0;\n margin: 0;\n padding: 0;\n position: absolute;\n right: 0;\n top: 0;\n width: $dropbutton-toggle-width;\n}\n\n.dropbutton__toggle-button {\n @include button();\n @include svg-background(dropbutton-arrow-down);\n background-position: 50%\n (\n math.div($dropbutton-toggle-height, 2) -\n math.div($dropbutton-toggle-icon-size, 2)\n );\n background-repeat: no-repeat;\n background-size: $dropbutton-toggle-icon-size;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n height: 100%;\n padding: 0;\n white-space: nowrap;\n width: 100%;\n}\n\n.dropbutton__item {\n margin: 0;\n padding: 0;\n\n &.is-secondary-action {\n display: none;\n\n &:not(:last-child) .dropbutton__button {\n border-bottom-left-radius: 0;\n }\n }\n\n &:not(:first-child) .dropbutton__button {\n border-top-left-radius: 0;\n }\n}\n\n// Nested to override default button styles.\n.dropbutton .dropbutton__button {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n display: block;\n margin: 0;\n text-align: left;\n width: 100%;\n}\n","// @file\n// SVG background image\n\n@use '../00-functions' as *;\n\n@mixin svg-background($image-name, $image-location: '../images/') {\n $url: $image-location + $image-name + '.svg';\n background-image: url($url);\n}\n\n@mixin svg-background-important($image-name, $image-location: '../images/') {\n $url: $image-location + $image-name + '.svg';\n background-image: url($url) !important;\n}\n\n@mixin svgz-background($image-name, $image-location: '../images/') {\n $url: $image-location + $image-name + '.svgz';\n background-image: url($url);\n}\n\n@mixin svg-background-inline($image-name, $image-location: '../images/') {\n background-image: inline($image-location + $image-name + '.svg');\n}\n\n@mixin svgz-background-inline($image-name, $image-location: '../images/') {\n background-image: inline($image-location + $image-name + '.svgz');\n}\n","// @file\n// Various mixins for list styles\n\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n@use 'mixins.breakpoint' as *;\n\n@mixin list-clean {\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n li {\n margin: 0;\n padding-left: 0;\n\n &::before {\n display: none;\n }\n }\n}\n\n@mixin list-inline {\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n\n li {\n margin: 0;\n padding-left: 0;\n }\n\n > li {\n display: inline;\n }\n}\n\n@mixin list-pipeline($pipeline-border-color: gesso-color(ui, generic, border)) {\n @include clearfix();\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n\n > li {\n border-right: 1px solid $pipeline-border-color; // LTR\n display: block;\n float: left; // LTR\n margin-right: 0.75em; // LTR\n padding-left: 0;\n padding-right: 0.75em; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n border-left: 1px solid $pipeline-border-color;\n border-right: 0;\n float: right;\n margin-left: 0.75em;\n margin-right: 0;\n padding-left: 0.75em;\n padding-right: 0;\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.is-active {\n font-weight: gesso-font-weight(bold);\n }\n\n &:last-child {\n border-right: 0; // LTR\n margin-right: 0; // LTR\n padding-right: 0; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n border-left: 0;\n margin-left: 0;\n padding-left: 0;\n }\n }\n }\n }\n}\n\n@mixin list-border(\n $list-border-padding: 0.25rem,\n $list-border-color: gesso-color(ui, generic, border)\n) {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n\n > li {\n border-bottom: 1px solid $list-border-color;\n margin-bottom: 0;\n padding: $list-border-padding;\n }\n}\n\n@mixin list-column(\n $list-column-count: 2,\n $list-column-gap: 2em,\n $list-item-padding: 0.25em\n) {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n\n li {\n padding-left: 0;\n }\n\n > li {\n break-inside: avoid-column;\n display: table; // break-inside alternative for Firefox\n margin-bottom: 0;\n padding-bottom: $list-item-padding; // use padding instead of margin for Safari bug with CSS columns\n }\n\n @include breakpoint(500px) {\n column-count: $list-column-count;\n column-gap: $list-column-gap;\n }\n}\n","// @file\n// Button styles\n\n@use '../uswds-theme.artifact' as *;\n@use '../00-functions' as *;\n@use 'usa-button' as *;\n\n$button-border-radius: radius($theme-button-border-radius) !default;\n$button-background-color: gesso-color(button, primary, background) !default;\n$button-background-color-active: gesso-color(\n button,\n primary,\n background-active\n) !default;\n$button-background-color-disabled: gesso-color(\n button,\n disabled,\n background\n) !default;\n$button-background-color-hover: gesso-color(\n button,\n primary,\n background-hover\n) !default;\n$button-text-color: gesso-color(button, primary, text) !default;\n$button-text-color-active: gesso-color(button, primary, text-active) !default;\n$button-text-color-disabled: gesso-color(button, disabled, text) !default;\n$button-text-color-hover: gesso-color(button, primary, text-hover) !default;\n$button-font-size: gesso-base-font-size() !default;\n\n@mixin button(\n $color-background: $button-background-color,\n $color-text: $button-text-color,\n $color-background-hover: $button-background-color-hover,\n $color-text-hover: $button-text-color-hover,\n $color-background-active: $button-background-color-active,\n $color-text-active: $button-text-color-active,\n $color-background-disabled: $button-background-color-disabled,\n $color-text-disabled: $button-text-color-disabled,\n $border-radius: $button-border-radius,\n $font-size: $button-font-size\n) {\n /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */\n @extend .usa-button;\n\n background-color: $color-background;\n border-radius: $border-radius;\n color: $color-text;\n display: inline-block;\n font-family: gesso-font-family(body);\n font-size: rem($font-size);\n transition: background gesso-duration(short) gesso-easing(ease-in);\n vertical-align: top;\n white-space: normal;\n\n &:visited {\n color: $color-text;\n }\n\n &:hover,\n &:focus {\n background-color: $color-background-hover;\n color: $color-text-hover;\n }\n\n &:active {\n background-color: $color-background-active;\n color: $color-text-active;\n }\n\n &[disabled] {\n @include button-disabled();\n background-color: $color-background-disabled;\n color: $color-text-disabled;\n }\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/facet-list/facet-list.css b/services/drupal/web/themes/epa_theme/css/facet-list/facet-list.css new file mode 100644 index 0000000000..9e925b617b --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/facet-list/facet-list.css @@ -0,0 +1,1840 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +.facet-list { + list-style-type: none; + margin: 0; + padding: 0; +} +.facet-list:last-child { + margin-bottom: 0; +} +.facet-list li { + margin: 0; + padding-left: 0; +} +.facet-list li::before { + display: none; +} +.facet-list .facet-list { + padding: 1rem 0 0 1.5rem; +} + +.facet-list__item + .facet-list__item { + margin-top: 1rem; +} +/*# sourceMappingURL=facet-list.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/facet-list/facet-list.css.map b/services/drupal/web/themes/epa_theme/css/facet-list/facet-list.css.map new file mode 100644 index 0000000000..f7635d05e0 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/facet-list/facet-list.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","facet-list/facet-list.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","facet-list/facet-list.scss","../00-config/01-mixins/_mixins.list.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AUlwDA;ECGE,qBAAA;EACA,SAAA;EACA,UAAA;AXmwDF;AWjwDE;EACE,gBAAA;AXmwDJ;AWhwDE;EACE,SAAA;EACA,eAAA;AXkwDJ;AWhwDI;EACE,aAAA;AXkwDN;AU/wDE;EACE,wBAAA;AVixDJ;;AU5wDE;EACE,gBAAA;AV+wDJ","file":"facet-list.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.facet-list {\n list-style-type: none;\n margin: 0;\n padding: 0;\n}\n.facet-list:last-child {\n margin-bottom: 0;\n}\n.facet-list li {\n margin: 0;\n padding-left: 0;\n}\n.facet-list li::before {\n display: none;\n}\n.facet-list .facet-list {\n padding: 1rem 0 0 1.5rem;\n}\n\n.facet-list__item + .facet-list__item {\n margin-top: 1rem;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for a Facet List.\n\n@use '../../00-config' as *;\n\n.facet-list {\n @include list-clean();\n\n & & {\n padding: rem(gesso-spacing(2)) 0 0 rem(gesso-spacing(3));\n }\n}\n\n.facet-list__item {\n & + & {\n margin-top: rem(gesso-spacing(2));\n }\n}\n","// @file\n// Various mixins for list styles\n\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n@use 'mixins.breakpoint' as *;\n\n@mixin list-clean {\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n li {\n margin: 0;\n padding-left: 0;\n\n &::before {\n display: none;\n }\n }\n}\n\n@mixin list-inline {\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n\n li {\n margin: 0;\n padding-left: 0;\n }\n\n > li {\n display: inline;\n }\n}\n\n@mixin list-pipeline($pipeline-border-color: gesso-color(ui, generic, border)) {\n @include clearfix();\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n\n > li {\n border-right: 1px solid $pipeline-border-color; // LTR\n display: block;\n float: left; // LTR\n margin-right: 0.75em; // LTR\n padding-left: 0;\n padding-right: 0.75em; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n border-left: 1px solid $pipeline-border-color;\n border-right: 0;\n float: right;\n margin-left: 0.75em;\n margin-right: 0;\n padding-left: 0.75em;\n padding-right: 0;\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.is-active {\n font-weight: gesso-font-weight(bold);\n }\n\n &:last-child {\n border-right: 0; // LTR\n margin-right: 0; // LTR\n padding-right: 0; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n border-left: 0;\n margin-left: 0;\n padding-left: 0;\n }\n }\n }\n }\n}\n\n@mixin list-border(\n $list-border-padding: 0.25rem,\n $list-border-color: gesso-color(ui, generic, border)\n) {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n\n > li {\n border-bottom: 1px solid $list-border-color;\n margin-bottom: 0;\n padding: $list-border-padding;\n }\n}\n\n@mixin list-column(\n $list-column-count: 2,\n $list-column-gap: 2em,\n $list-item-padding: 0.25em\n) {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n\n li {\n padding-left: 0;\n }\n\n > li {\n break-inside: avoid-column;\n display: table; // break-inside alternative for Firefox\n margin-bottom: 0;\n padding-bottom: $list-item-padding; // use padding instead of margin for Safari bug with CSS columns\n }\n\n @include breakpoint(500px) {\n column-count: $list-column-count;\n column-gap: $list-column-gap;\n }\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/facet/facet.css b/services/drupal/web/themes/epa_theme/css/facet/facet.css new file mode 100644 index 0000000000..f06d9ab69b --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/facet/facet.css @@ -0,0 +1,1871 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +.facet { + color: #1b1b1b; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + font-size: 0.93rem; + line-height: 1.2; + text-decoration: none; +} +.facet:visited, .facet:hover, .facet:focus, .facet:active { + color: #1b1b1b; +} + +.facet__icon { + -ms-flex-negative: 0; + flex-shrink: 0; + height: 1.2em !important; + left: -1px; + margin-right: 0.5rem; + top: 0 !important; + width: 1.2 em !important; +} + +.facet__icon--empty { + color: #a9aeb1; +} +.facet.is-active > .facet__icon--empty { + display: none !important; +} + +.facet__icon--selected { + color: #005ea2; + display: none !important; +} +.facet.is-active > .facet__icon--selected { + display: inline-block !important; +} + +.facet__content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.facet__count { + margin-left: 1rem; +} +/*# sourceMappingURL=facet.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/facet/facet.css.map b/services/drupal/web/themes/epa_theme/css/facet/facet.css.map new file mode 100644 index 0000000000..aabbb7503a --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/facet/facet.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","facet/facet.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","facet/facet.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AUlwDA;EACE,cAAA;EACA,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,kBAAA;EACA,gBAAA;EACA,qBAAA;AVqwDF;AUnwDE;EAIE,cAAA;AVkwDJ;;AU9vDA;EACE,oBAAA;MAAA,cAAA;EACA,wBAAA;EACA,UAAA;EACA,oBAAA;EACA,iBAAA;EACA,wBAAA;AViwDF;;AU9vDA;EACE,cAAA;AViwDF;AU/vDE;EACE,wBAAA;AViwDJ;;AU7vDA;EACE,cAAA;EACA,wBAAA;AVgwDF;AU9vDE;EACE,gCAAA;AVgwDJ;;AU5vDA;EACE,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,mBAAA;MAAA,oBAAA;UAAA,YAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,8BAAA;AV+vDF;;AU5vDA;EACE,iBAAA;AV+vDF","file":"facet.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.facet {\n color: #1b1b1b;\n display: flex;\n font-size: 0.93rem;\n line-height: 1.2;\n text-decoration: none;\n}\n.facet:visited, .facet:hover, .facet:focus, .facet:active {\n color: #1b1b1b;\n}\n\n.facet__icon {\n flex-shrink: 0;\n height: 1.2em !important;\n left: -1px;\n margin-right: 0.5rem;\n top: 0 !important;\n width: 1.2 em !important;\n}\n\n.facet__icon--empty {\n color: #a9aeb1;\n}\n.facet.is-active > .facet__icon--empty {\n display: none !important;\n}\n\n.facet__icon--selected {\n color: #005ea2;\n display: none !important;\n}\n.facet.is-active > .facet__icon--selected {\n display: inline-block !important;\n}\n\n.facet__content {\n display: flex;\n flex-grow: 1;\n justify-content: space-between;\n}\n\n.facet__count {\n margin-left: 1rem;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for a Facet.\n\n@use '../../00-config' as *;\n\n.facet {\n color: gesso-color(text, primary);\n display: flex;\n font-size: font-size(body, 2xs);\n line-height: gesso-line-height(2);\n text-decoration: none;\n\n &:visited,\n &:hover,\n &:focus,\n &:active {\n color: gesso-color(text, primary);\n }\n}\n\n.facet__icon {\n flex-shrink: 0;\n height: 1.2em !important;\n left: -1px;\n margin-right: rem(gesso-spacing(1));\n top: 0 !important;\n width: 1.2 em !important;\n}\n\n.facet__icon--empty {\n color: gesso-grayscale(gray-3);\n\n .facet.is-active > & {\n display: none !important;\n }\n}\n\n.facet__icon--selected {\n color: gesso-brand(blue, base);\n display: none !important;\n\n .facet.is-active > & {\n display: inline-block !important;\n }\n}\n\n.facet__content {\n display: flex;\n flex-grow: 1;\n justify-content: space-between;\n}\n\n.facet__count {\n margin-left: rem(gesso-spacing(2));\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/filters/filters.css b/services/drupal/web/themes/epa_theme/css/filters/filters.css new file mode 100644 index 0000000000..017a7c1d4a --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/filters/filters.css @@ -0,0 +1,1862 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +.filters { + margin-bottom: 1.5rem; +} + +.filters__list { + list-style-type: none; + margin-left: 0; + padding-left: 0; + display: inline-block; + margin: 0 1rem 0 0; +} +.filters__list li { + margin: 0; + padding-left: 0; +} +.filters__list > li { + display: inline; +} + +.filters__link { + background-color: #edeff0; + border-radius: 2px; + color: #565c65; + display: inline-block; + font-size: 0.93rem; + line-height: 1.2; + margin: 0 0.25rem 0.25rem 0; + padding: 0.25rem 0.5rem; + text-decoration: none; +} +.filters__link:visited { + color: #565c65; +} +.filters__link:hover, .filters__link:focus, .filters__link:active { + background-color: #dfe1e2; + color: #3d4551; +} + +.filters__remove { + display: inline-block; + font-size: 0.93rem; + line-height: 1.2; + padding: 0.25rem 0.5rem; +} +/*# sourceMappingURL=filters.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/filters/filters.css.map b/services/drupal/web/themes/epa_theme/css/filters/filters.css.map new file mode 100644 index 0000000000..2e7e498908 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/filters/filters.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","filters/filters.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","filters/filters.scss","../00-config/01-mixins/_mixins.list.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AUlwDA;EACE,qBAAA;AVqwDF;;AUlwDA;ECkBE,qBAAA;EACA,cAAA;EACA,eAAA;EDlBA,qBAAA;EACA,kBAAA;AVuwDF;AWpvDE;EACE,SAAA;EACA,eAAA;AXsvDJ;AWnvDE;EACE,eAAA;AXqvDJ;;AU3wDA;EACE,yBAAA;EACA,kBAAA;EACA,cAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,2BAAA;EACA,uBAAA;EACA,qBAAA;AV8wDF;AU5wDE;EACE,cAAA;AV8wDJ;AU3wDE;EAGE,yBAAA;EACA,cAAA;AV2wDJ;;AUvwDA;EACE,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,uBAAA;AV0wDF","file":"filters.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.filters {\n margin-bottom: 1.5rem;\n}\n\n.filters__list {\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n display: inline-block;\n margin: 0 1rem 0 0;\n}\n.filters__list li {\n margin: 0;\n padding-left: 0;\n}\n.filters__list > li {\n display: inline;\n}\n\n.filters__link {\n background-color: #edeff0;\n border-radius: 2px;\n color: #565c65;\n display: inline-block;\n font-size: 0.93rem;\n line-height: 1.2;\n margin: 0 0.25rem 0.25rem 0;\n padding: 0.25rem 0.5rem;\n text-decoration: none;\n}\n.filters__link:visited {\n color: #565c65;\n}\n.filters__link:hover, .filters__link:focus, .filters__link:active {\n background-color: #dfe1e2;\n color: #3d4551;\n}\n\n.filters__remove {\n display: inline-block;\n font-size: 0.93rem;\n line-height: 1.2;\n padding: 0.25rem 0.5rem;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for Filters.\n\n@use '../../00-config' as *;\n\n.filters {\n margin-bottom: rem(gesso-spacing(3));\n}\n\n.filters__list {\n @include list-inline();\n display: inline-block;\n margin: 0 rem(gesso-spacing(2)) 0 0;\n}\n\n.filters__link {\n background-color: gesso-grayscale(gray-1);\n border-radius: radius('sm');\n color: gesso-grayscale(gray-5);\n display: inline-block;\n font-size: font-size(body, 2xs);\n line-height: gesso-line-height(2);\n margin: 0 rem(gesso-spacing('05')) rem(gesso-spacing('05')) 0;\n padding: rem(gesso-spacing('05')) rem(gesso-spacing(1));\n text-decoration: none;\n\n &:visited {\n color: gesso-grayscale(gray-5);\n }\n\n &:hover,\n &:focus,\n &:active {\n background-color: gesso-grayscale(gray-2);\n color: gesso-grayscale(gray-6);\n }\n}\n\n.filters__remove {\n display: inline-block;\n font-size: font-size(body, 2xs);\n line-height: gesso-line-height(2);\n padding: rem(gesso-spacing('05')) rem(gesso-spacing(1));\n}\n","// @file\n// Various mixins for list styles\n\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n@use 'mixins.breakpoint' as *;\n\n@mixin list-clean {\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n li {\n margin: 0;\n padding-left: 0;\n\n &::before {\n display: none;\n }\n }\n}\n\n@mixin list-inline {\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n\n li {\n margin: 0;\n padding-left: 0;\n }\n\n > li {\n display: inline;\n }\n}\n\n@mixin list-pipeline($pipeline-border-color: gesso-color(ui, generic, border)) {\n @include clearfix();\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n\n > li {\n border-right: 1px solid $pipeline-border-color; // LTR\n display: block;\n float: left; // LTR\n margin-right: 0.75em; // LTR\n padding-left: 0;\n padding-right: 0.75em; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n border-left: 1px solid $pipeline-border-color;\n border-right: 0;\n float: right;\n margin-left: 0.75em;\n margin-right: 0;\n padding-left: 0.75em;\n padding-right: 0;\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.is-active {\n font-weight: gesso-font-weight(bold);\n }\n\n &:last-child {\n border-right: 0; // LTR\n margin-right: 0; // LTR\n padding-right: 0; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n border-left: 0;\n margin-left: 0;\n padding-left: 0;\n }\n }\n }\n }\n}\n\n@mixin list-border(\n $list-border-padding: 0.25rem,\n $list-border-color: gesso-color(ui, generic, border)\n) {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n\n > li {\n border-bottom: 1px solid $list-border-color;\n margin-bottom: 0;\n padding: $list-border-padding;\n }\n}\n\n@mixin list-column(\n $list-column-count: 2,\n $list-column-gap: 2em,\n $list-item-padding: 0.25em\n) {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n\n li {\n padding-left: 0;\n }\n\n > li {\n break-inside: avoid-column;\n display: table; // break-inside alternative for Firefox\n margin-bottom: 0;\n padding-bottom: $list-item-padding; // use padding instead of margin for Safari bug with CSS columns\n }\n\n @include breakpoint(500px) {\n column-count: $list-column-count;\n column-gap: $list-column-gap;\n }\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/header-link/header-link.css b/services/drupal/web/themes/epa_theme/css/header-link/header-link.css new file mode 100644 index 0000000000..f44dc0670a --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/header-link/header-link.css @@ -0,0 +1,1826 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +.header-link { + line-height: 1.2; + text-decoration: none; + text-transform: uppercase; +} +.header-link:hover, .header-link:focus, .header-link:active { + text-decoration: underline; +} +/*# sourceMappingURL=header-link.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/header-link/header-link.css.map b/services/drupal/web/themes/epa_theme/css/header-link/header-link.css.map new file mode 100644 index 0000000000..ed213137b9 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/header-link/header-link.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","header-link/header-link.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","header-link/header-link.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AUlwDA;EACE,gBAAA;EACA,qBAAA;EACA,yBAAA;AVqwDF;AUnwDE;EAGE,0BAAA;AVmwDJ","file":"header-link.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.header-link {\n line-height: 1.2;\n text-decoration: none;\n text-transform: uppercase;\n}\n.header-link:hover, .header-link:focus, .header-link:active {\n text-decoration: underline;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for a Header Link.\n\n@use '../../00-config' as *;\n\n.header-link {\n line-height: gesso-line-height(2);\n text-decoration: none;\n text-transform: uppercase;\n\n &:hover,\n &:focus,\n &:active {\n text-decoration: underline;\n }\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/page-title/page-title.css.map b/services/drupal/web/themes/epa_theme/css/page-title/page-title.css.map deleted file mode 100644 index 38f6919602..0000000000 --- a/services/drupal/web/themes/epa_theme/css/page-title/page-title.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","page-title/page-title.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","page-title/page-title.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AUlwDA;EACE,kBAAA;AVqwDF","file":"page-title.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.page-title {\n margin: 0 0 1.5rem;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for Page title.\n\n@use '../../00-config' as *;\n\n.page-title {\n margin: 0 0 rem(gesso-spacing(3));\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml b/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml index a100ef4208..a6785f9c1e 100644 --- a/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml +++ b/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml @@ -6,7 +6,7 @@ global: version: 1 css: theme: - css/styles.css: {} + css/core.css: {} css-lib/colorbox.min.css: {} js: js/dist/scripts.min.js: {} @@ -96,9 +96,39 @@ audio: version: VERSION css: theme: - css/audio/audio.css: {} -page_title: + css/audio/audio.css: {} +block: version: VERSION css: theme: - css/page-title/page-title.css: {} \ No newline at end of file + css/block/block.css: {} +document: + version: VERSION + css: + theme: + css/document/document.css: {} +dropbutton: + version: VERSION + css: + theme: + css/dropbutton/dropbutton.css: {} +facet: + version: VERSION + css: + theme: + css/facet/facet.css: {} +facet-list: + version: VERSION + css: + theme: + css/facet-list/facet-list.css: {} +filters: + version: VERSION + css: + theme: + css/filters/filters.css: {} +header-link: + version: VERSION + css: + theme: + css/header-link/header-link.css: {} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/source/_meta/_head.twig b/services/drupal/web/themes/epa_theme/source/_meta/_head.twig index 426821bec2..57d009f7c0 100644 --- a/services/drupal/web/themes/epa_theme/source/_meta/_head.twig +++ b/services/drupal/web/themes/epa_theme/source/_meta/_head.twig @@ -26,7 +26,7 @@ - + {% else %} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/block/_block.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/block/block.scss similarity index 100% rename from services/drupal/web/themes/epa_theme/source/_patterns/05-components/block/_block.scss rename to services/drupal/web/themes/epa_theme/source/_patterns/05-components/block/block.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/block/block.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/block/block.twig index a5b699da1b..a0e2170cea 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/block/block.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/block/block.twig @@ -1,3 +1,5 @@ +{{ attach_library('epa_theme/block') }} + {% if not hide_wrapper %} {% set additional_attributes = { 'class': ['block'], diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/document/_document.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/document/document.scss similarity index 100% rename from services/drupal/web/themes/epa_theme/source/_patterns/05-components/document/_document.scss rename to services/drupal/web/themes/epa_theme/source/_patterns/05-components/document/document.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/document/document.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/document/document.twig index 33df28e73b..479ecad123 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/document/document.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/document/document.twig @@ -1,3 +1,5 @@ +{{ attach_library('epa_theme/document') }} + {% if pattern_lab %} {% include '@components/file/file.twig' with { diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/dropbutton/_dropbutton.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/dropbutton/dropbutton.scss similarity index 100% rename from services/drupal/web/themes/epa_theme/source/_patterns/05-components/dropbutton/_dropbutton.scss rename to services/drupal/web/themes/epa_theme/source/_patterns/05-components/dropbutton/dropbutton.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/dropbutton/dropbutton.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/dropbutton/dropbutton.twig index b867ed016b..672b118c8d 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/dropbutton/dropbutton.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/dropbutton/dropbutton.twig @@ -1,3 +1,5 @@ +{{ attach_library('epa_theme/dropbutton') }} +

  • diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet-list/_facet-list.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet-list/facet-list.scss similarity index 100% rename from services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet-list/_facet-list.scss rename to services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet-list/facet-list.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet-list/facet-list.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet-list/facet-list.twig index e6392b7ff6..9ae9e0a4b8 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet-list/facet-list.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet-list/facet-list.twig @@ -1,3 +1,5 @@ +{{ attach_library('epa_theme/facet-list') }} + {% set classes = [ 'facet-list', modifier_classes ? modifier_classes, diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/facet--active/facet--active.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/facet--active/facet--active.twig index 0889adb7d5..39b631cfbd 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/facet--active/facet--active.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/facet--active/facet--active.twig @@ -1,3 +1,5 @@ +{{ attach_library('epa_theme/facet') }} + {% set classes = [ 'is-active', modifier_classes ? modifier_classes, diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/_facet.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/facet.scss similarity index 100% rename from services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/_facet.scss rename to services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/facet.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/facet.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/facet.twig index 6ba2e62a8e..8234571493 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/facet.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/facet/facet.twig @@ -1,3 +1,5 @@ +{{ attach_library('epa_theme/facet') }} + {% set classes = [ 'facet', modifier_classes ? modifier_classes, diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/filters/_filters.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/filters/filters.scss similarity index 100% rename from services/drupal/web/themes/epa_theme/source/_patterns/05-components/filters/_filters.scss rename to services/drupal/web/themes/epa_theme/source/_patterns/05-components/filters/filters.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/filters/filters.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/filters/filters.twig index 46e607f945..99d24cbf2b 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/filters/filters.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/filters/filters.twig @@ -1,3 +1,5 @@ +{{ attach_library('epa_theme/filters') }} + {% set classes = [ 'filters', modifier_classes ? modifier_classes, diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/header-link/_header-link.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/header-link/header-link.scss similarity index 100% rename from services/drupal/web/themes/epa_theme/source/_patterns/05-components/header-link/_header-link.scss rename to services/drupal/web/themes/epa_theme/source/_patterns/05-components/header-link/header-link.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/header-link/header-link.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/header-link/header-link.twig index 68edfa9ae7..8a3ac3e197 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/header-link/header-link.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/header-link/header-link.twig @@ -1,3 +1,5 @@ +{{ attach_library('epa_theme/header-link') }} + {% set classes = [ 'header-link', modifier_classes ? modifier_classes, diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/_page-title.scss similarity index 100% rename from services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.scss rename to services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/_page-title.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.twig index dbad3d9c35..8bb5a12a3a 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/page-title/page-title.twig @@ -1,5 +1,3 @@ -{{ attach_library('epa_theme/page_title') }} - {% set classes = [ 'page-title', contextual_links ? 'contextual-region', From 8c3cbaa450d496974e3003d1568b30e54d6da7da Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Mon, 24 Oct 2022 10:44:24 -0600 Subject: [PATCH 22/59] facet list ,header list hublinks, pager, progress, rss feed, site alert web area title, definition, filters, teaser --- .../epa_theme/css/definition/definition.css | 2703 +++++++++++++++ .../css/definition/definition.css.map | 1 + .../css/hero-slideshow/hero-slideshow.css | 2038 ++++++++++++ .../css/hero-slideshow/hero-slideshow.css.map | 1 + .../epa_theme/css/hublinks/hublinks.css | 1848 +++++++++++ .../epa_theme/css/hublinks/hublinks.css.map | 1 + .../css/image-gallery/image-gallery.css | 2904 +++++++++++++++++ .../css/image-gallery/image-gallery.css.map | 1 + .../web/themes/epa_theme/css/pager/pager.css | 1911 +++++++++++ .../themes/epa_theme/css/pager/pager.css.map | 1 + .../epa_theme/css/progress/progress.css | 1868 +++++++++++ .../epa_theme/css/progress/progress.css.map | 1 + .../epa_theme/css/rss-feed/rss-feed.css | 1822 +++++++++++ .../epa_theme/css/rss-feed/rss-feed.css.map | 1 + .../epa_theme/css/site-alert/site-alert.css | 1839 +++++++++++ .../css/site-alert/site-alert.css.map | 1 + .../themes/epa_theme/css/teaser/teaser.css | 2689 +++++++++++++++ .../epa_theme/css/teaser/teaser.css.map | 1 + .../css/web-area-title/web-area-title.css | 2655 +++++++++++++++ .../css/web-area-title/web-area-title.css.map | 1 + .../themes/epa_theme/epa_theme.libraries.yml | 57 +- .../{_definition.scss => definition.scss} | 0 .../05-components/definition/definition.twig | 2 + .../05-components/facet-list/facet-list.twig | 2 +- .../header-link/header-link.twig | 2 +- ...ero-slideshow.scss => hero-slideshow.scss} | 0 ...ero--reversed.scss => hero--reversed.scss} | 0 ...o--slideshow.scss => hero--slideshow.scss} | 0 .../{_hublinks.scss => hublinks.scss} | 0 .../05-components/hublinks/hublinks.twig | 2 + ..._image-gallery.scss => image-gallery.scss} | 0 .../pager/{_pager.scss => pager.scss} | 0 .../_patterns/05-components/pager/pager.twig | 3 + .../{_progress.scss => progress.scss} | 0 .../05-components/progress/progress.twig | 2 + .../{_rss-feed.scss => rss-feed.scss} | 0 .../05-components/rss-feed/rss-feed.twig | 2 + .../{_site-alert.scss => site-alert.scss} | 0 .../05-components/site-alert/site-alert.twig | 2 + .../teaser/{_teaser.scss => teaser.scss} | 0 .../05-components/teaser/teaser.twig | 2 + ...eb-area-title.scss => web-area-title.scss} | 0 42 files changed, 22358 insertions(+), 5 deletions(-) create mode 100644 services/drupal/web/themes/epa_theme/css/definition/definition.css create mode 100644 services/drupal/web/themes/epa_theme/css/definition/definition.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/hero-slideshow/hero-slideshow.css create mode 100644 services/drupal/web/themes/epa_theme/css/hero-slideshow/hero-slideshow.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/hublinks/hublinks.css create mode 100644 services/drupal/web/themes/epa_theme/css/hublinks/hublinks.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/image-gallery/image-gallery.css create mode 100644 services/drupal/web/themes/epa_theme/css/image-gallery/image-gallery.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/pager/pager.css create mode 100644 services/drupal/web/themes/epa_theme/css/pager/pager.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/progress/progress.css create mode 100644 services/drupal/web/themes/epa_theme/css/progress/progress.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/rss-feed/rss-feed.css create mode 100644 services/drupal/web/themes/epa_theme/css/rss-feed/rss-feed.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/site-alert/site-alert.css create mode 100644 services/drupal/web/themes/epa_theme/css/site-alert/site-alert.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/teaser/teaser.css create mode 100644 services/drupal/web/themes/epa_theme/css/teaser/teaser.css.map create mode 100644 services/drupal/web/themes/epa_theme/css/web-area-title/web-area-title.css create mode 100644 services/drupal/web/themes/epa_theme/css/web-area-title/web-area-title.css.map rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/{_definition.scss => definition.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/hero-slideshow/{_hero-slideshow.scss => hero-slideshow.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/hero/hero--reversed/{_hero--reversed.scss => hero--reversed.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/hero/hero--slideshow/{_hero--slideshow.scss => hero--slideshow.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/hublinks/{_hublinks.scss => hublinks.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/{_image-gallery.scss => image-gallery.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/pager/{_pager.scss => pager.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/progress/{_progress.scss => progress.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/rss-feed/{_rss-feed.scss => rss-feed.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/site-alert/{_site-alert.scss => site-alert.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/teaser/{_teaser.scss => teaser.scss} (100%) rename services/drupal/web/themes/epa_theme/source/_patterns/05-components/web-area-title/{_web-area-title.scss => web-area-title.scss} (100%) diff --git a/services/drupal/web/themes/epa_theme/css/definition/definition.css b/services/drupal/web/themes/epa_theme/css/definition/definition.css new file mode 100644 index 0000000000..b182efdfdf --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/definition/definition.css @@ -0,0 +1,2703 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +ol, ul { + margin-bottom: 1em; + margin-top: 1em; + line-height: 1.5; + padding-left: 3ch; +} +ol:last-child, ul:last-child { + margin-bottom: 0; +} +ol ul, ul ul, +ol ol, +ul ol { + margin-top: 0.25em; +} + +li { + margin-bottom: 0.25em; + max-width: 68ex; +} +li:last-child { + margin-bottom: 0; +} + +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled, .usa-button--outline.usa-button--inverse.definition__trigger { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited, .usa-button--outline.usa-button--inverse.definition__trigger:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.definition__trigger:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.definition__trigger:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus, .usa-button--outline.usa-button--inverse.definition__trigger:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.definition__trigger:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--hover.definition__trigger, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.definition__trigger:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--active.definition__trigger, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.definition__trigger:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled, .usa-button--outline.usa-button--inverse.usa-button--disabled.definition__trigger { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.definition__trigger:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled, .usa-button--outline.usa-button--inverse.usa-button--disabled.definition__trigger { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--hover.definition__trigger { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--active.definition__trigger { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited, .usa-button--outline.usa-button--inverse.definition__trigger:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.definition__trigger:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--hover.definition__trigger { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.definition__trigger:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--active.definition__trigger { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled, .definition__trigger { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited, .definition__trigger:visited { + color: #54278f; +} +.usa-button--unstyled:hover, .definition__trigger:hover { + color: #1a4480; +} +.usa-button--unstyled:active, .definition__trigger:active { + color: #162e51; +} +.usa-button--unstyled:focus, .definition__trigger:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .definition__trigger:hover, .usa-button--unstyled.usa-button--hover, .usa-button--hover.definition__trigger, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .definition__trigger:active, .usa-button--unstyled.usa-button--active, .usa-button--active.definition__trigger, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .definition__trigger:disabled, .usa-button--unstyled.usa-button--disabled, .usa-button--disabled.definition__trigger { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .definition__trigger:disabled, .usa-button--unstyled.usa-button--disabled, .usa-button--disabled.definition__trigger { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover, .usa-button--hover.definition__trigger { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active, .usa-button--active.definition__trigger { + color: #162e51; +} + +* { + -webkit-transition-duration: 200ms; + transition-duration: 200ms; + -webkit-transition-property: background-color, border-color, color, opacity, text-shadow, -webkit-box-shadow, -webkit-transform; + transition-property: background-color, border-color, color, opacity, text-shadow, -webkit-box-shadow, -webkit-transform; + transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform; + transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform, -webkit-box-shadow, -webkit-transform; + -webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + +@media print { + * { + background-color: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #000 !important; + text-shadow: none !important; + } + + @page { + margin: 2cm; + } +} +[id] { + scroll-margin-top: 1em; +} + +html { + -webkit-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + -webkit-font-kerning: normal; + font-kerning: normal; + font-size: 100%; + min-height: 100%; +} + +body { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 1.5; + background-color: #fff; + color: #1b1b1b; + margin: 0; + padding: 0; + word-wrap: break-word; +} +body.has-open-mobile-menu { + overflow: hidden; + -webkit-overflow-scrolling: touch; +} + +@media print { + nav { + display: none; + } +} + +summary { + display: list-item; +} + +iframe { + border: 0; + max-width: 100%; +} +@media print { + iframe { + display: none; + } +} + +h6, +.h6, h5, +.h5, h4, +.h4, h3, +.h3, h2, +.h2, h1 { + margin-bottom: 0; + margin-top: 0; + clear: none; + margin-bottom: 1rem; + clear: none; + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; + text-rendering: optimizeLegibility; +} +* + h6, +* + .h6, * + h5, +* + .h5, * + h4, +* + .h4, * + h3, +* + .h3, * + h2, +* + .h2, * + h1 { + margin-top: 1em; +} +@media print { + h6, +.h6, h5, +.h5, h4, +.h4, h3, +.h3, h2, +.h2, h1 { + orphans: 3; + page-break-after: avoid; + widows: 3; + } + h6::after, +.h6::after, h5::after, +.h5::after, h4::after, +.h4::after, h3::after, +.h3::after, h2::after, +.h2::after, h1::after { + display: inline-block; + } +} + +h1 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 2.44rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h1 { + font-size: 1.95rem; + } +} + +h2, +.h2 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.95rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h2, +.h2 { + font-size: 1.34rem; + } +} + +h3, +.h3 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.34rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h3, +.h3 { + font-size: 1.1rem; + } +} + +h4, +.h4 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 0.98rem; + font-weight: 700; + line-height: 1.2; +} + +h5, +.h5 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 0.91rem; + font-weight: 700; + line-height: 1.2; +} + +h6, +.h6 { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 0.87rem; + font-weight: normal; + letter-spacing: 0.025em; + line-height: 1.1; + text-transform: uppercase; +} + +p { + line-height: 1.5; + margin-bottom: 1rem; + margin-top: 0; +} +@media print { + p { + orphans: 3; + widows: 3; + } +} +p:empty { + margin: 0 !important; +} + +a { + background-color: transparent; + color: #005ea2; + -webkit-text-decoration-skip: objects; +} +a:visited { + color: #54278f; +} +a:hover, a:focus { + color: #1a4480; +} +a:active { + color: #162e51; +} +@media print { + a, a:visited { + text-decoration: none; + } + a[href]::after { + content: " <" attr(href) ">"; + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 10pt; + font-weight: normal; + text-transform: lowercase; + } + a[href^="/"]::after { + content: " "; + } + a[href^="javascript:"]::after, a[href^="mailto:"]::after, a[href^="tel:"]::after, a[href^="#"]::after, a[href*="?"]::after { + content: ""; + } +} + +abbr[title] { + border-bottom: 1px dotted; + text-decoration: none; +} +@media (min-width: max-width 40rem) { + abbr[title] { + border-bottom: 0; + } + abbr[title]::after { + content: " (" attr(title) ")"; + } +} +abbr:hover { + cursor: help; +} +@media print { + abbr[title] { + border-bottom: 0; + } + abbr[title]::after { + content: " (" attr(title) ")"; + } +} + +cite { + color: #565c65; + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 0.93rem; + font-style: normal; + font-weight: normal; + letter-spacing: 0.025em; + line-height: 1.6; +} + +dfn { + font-style: normal; +} + +ins { + text-decoration: none; +} + +mark { + background: #ff0; + color: #000; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +var { + font-style: normal; +} + +blockquote { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.1rem; + font-weight: normal; + line-height: 1.7; + background-color: #fff; + border-left: 0.5rem solid #00bde3; + clear: both; + margin: 0 0 1.5rem; + padding: 1.25rem 0 1.25rem 1.25rem; +} +blockquote > :last-child { + margin-bottom: 0; +} +* + blockquote { + margin-top: 1.5rem; +} + +blockquote cite { + display: block; + margin: 1rem 0; + text-align: left; +} + +blockquote p { + color: inherit; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} +blockquote cite em { + border-left: 1px solid #71767a; + font-weight: normal; + margin-left: 0.25rem; + padding-left: 0.5rem; +} +@media print { + blockquote { + page-break-inside: avoid; + } +} + +pre { + margin: 0 0 1rem; + overflow: auto; +} +* + pre { + margin-top: 1rem; +} +@media print { + pre { + page-break-inside: avoid; + } +} + +hr { + border-top: solid #a9aeb1; + border-width: 1px 0 0; + -webkit-box-sizing: content-box; + box-sizing: content-box; + height: 0; + margin: 0 0 1.5rem; + overflow: auto; +} +* + hr { + margin-top: 1.5rem; +} + +address { + font-style: normal; +} + +ul { + list-style-type: disc; + margin-top: 0; +} +[dir=rtl] ul { + padding-left: 0; + padding-right: 3ch; +} +ul:last-child { + margin-bottom: revert; +} +ul ol, +ul ul { + margin-top: 0.5rem; +} +ul ul { + list-style-type: circle; +} +ul ul ul { + list-style-type: square; +} + +ol { + margin-top: 0; +} +[dir=rtl] ol { + padding-left: 0; + padding-right: 3ch; +} +ol:last-child { + margin-bottom: revert; +} +ol ol, +ol ul { + margin-top: 0.5rem; +} +ol ol { + list-style-type: lower-alpha; +} +ol ol ol { + list-style-type: lower-roman; +} + +li { + max-width: unset; +} +@media print { + li { + page-break-inside: avoid; + } +} + +dd { + margin: 0 0 1rem 3ch; +} +[dir=rtl] dd { + margin-left: 0; + margin-right: 3ch; +} + +dl { + margin: 0 0 1rem; +} + +table { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 1.5; + border-collapse: collapse; + border-spacing: 0; + color: #1b1b1b; + margin: 1.25rem 0; + text-align: left; + /* stylelint-disable selector-class-pattern */ + /* stylelint-enable selector-class-pattern */ +} +table thead th { + background-clip: padding-box; + color: #1b1b1b; + font-weight: 700; + line-height: 1.3; +} +table thead th, +table thead td { + background-color: #dfe1e2; + color: #1b1b1b; +} +table tbody th { + text-align: left; +} +table th, +table td { + background-color: white; + border: 1px solid #1b1b1b; + font-weight: normal; + padding: 0.5rem 1rem; +} +table caption { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1rem; + font-weight: 700; + margin-bottom: 0.75rem; + text-align: left; +} +table th[data-sortable] { + padding-right: 2.5rem; + position: relative; +} +table th[data-sortable]::after { + border-bottom-color: transparent; + border-bottom-style: solid; + border-bottom-width: 1px; + bottom: 0; + content: ""; + height: 0; + left: 0; + position: absolute; + width: 100%; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button, table th[data-sortable][aria-sort=none] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:visited, table th[data-sortable][aria-sort=none] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g.unsorted { + fill: #1b1b1b; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover .usa-icon > g.unsorted { + fill: black; +} +table th[data-sortable][aria-sort=descending], table th[data-sortable][aria-sort=ascending] { + background-color: #97d4ea; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g.descending { + fill: #1b1b1b; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g.ascending { + fill: #1b1b1b; +} +table thead th[aria-sort] { + background-color: #97d4ea; + color: #1b1b1b; +} +table td[data-sort-active], +table th[data-sort-active] { + background-color: #e1f3f8; + color: #1b1b1b; +} + +@media print { + thead { + display: table-header-group; + } +} + +tbody th { + background-color: #f0f0f0; + font-weight: 700; +} + +@media print { + tr { + page-break-inside: avoid; + } +} + +button { + overflow: visible; +} + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +input { + line-height: normal; +} + +legend { + border: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: inherit; + display: table; + margin: 0; + max-width: 100%; + padding: 0; + white-space: normal; +} + +optgroup { + font-weight: 700; +} + +textarea { + overflow: auto; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +canvas { + display: inline-block; +} + +figure { + margin: 0; +} + +img { + border: 0; + font-style: italic; + height: auto; + max-width: 100%; + vertical-align: middle; +} +@media print { + img { + max-width: 100% !important; + page-break-inside: avoid; + } +} + +svg:not(:root) { + overflow: hidden; +} + +.definition__tooltip a:link, .definition__tooltip a:visited { + color: #dfe1e2; +} +.definition__tooltip a:link::after, .definition__tooltip a:visited::after { + /* stylelint-disable-next-line selector-no-qualifying-type */ +} +html.no-js .definition__tooltip a:link::after, .definition__tooltip html.no-js a:link::after, html.no-js .definition__tooltip a:visited::after, .definition__tooltip html.no-js a:visited::after { + background-image: url("../images/external-link--gray-2.svg") !important; +} +.definition__tooltip a:hover, .definition__tooltip a:focus, .definition__tooltip a:active { + color: #fff; +} +.definition__tooltip a:hover::after, .definition__tooltip a:focus::after, .definition__tooltip a:active::after { + /* stylelint-disable-next-line selector-no-qualifying-type */ +} +html.no-js .definition__tooltip a:hover::after, .definition__tooltip html.no-js a:hover::after, html.no-js .definition__tooltip a:focus::after, .definition__tooltip html.no-js a:focus::after, html.no-js .definition__tooltip a:active::after, .definition__tooltip html.no-js a:active::after { + background-image: url("../images/external-link--white.svg") !important; +} + +.definition { + cursor: help; +} +.definition:focus-within .definition__tooltip { + display: block; +} + +.definition__trigger { + border-bottom: 1px dotted; + position: relative; + text-decoration: none; +} +.definition__trigger:hover, .definition__trigger:focus { + text-decoration: none; +} +.definition__trigger:focus + .definition__tooltip { + display: block; +} + +.definition__tooltip { + background: #162e51; + color: #fff; + display: none; + font-size: 1rem; + margin-top: -0.1875rem; + max-width: 60rem; + padding: 1rem; + position: absolute; + z-index: 1; +} +.definition__term { + color: #00bde3; + display: block; + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.1rem; + font-weight: gesso-bold(bold); + margin-bottom: 0.5rem; +} +/*# sourceMappingURL=definition.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/definition/definition.css.map b/services/drupal/web/themes/epa_theme/css/definition/definition.css.map new file mode 100644 index 0000000000..b33dff22f4 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/definition/definition.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/placeholders/_list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_margin.scss","definition/definition.css","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","../02-base/02-html-elements/00-universal/_universal.scss","../02-base/02-html-elements/01-html/_html.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-kerning.scss","../02-base/02-html-elements/02-body/_body.scss","../02-base/02-html-elements/10-nav/_nav.scss","../02-base/02-html-elements/11-details/_details.scss","../02-base/02-html-elements/12-iframe/_iframe.scss","../02-base/02-html-elements/13-headings/_headings.scss","../00-config/01-mixins/uswds-overrides/_mixins.uswds.typography.scss","../00-config/01-mixins/_mixins.display-text-style.scss","../00-config/01-mixins/_mixins.breakpoint.scss","../02-base/02-html-elements/14-paragraph/_paragraph.scss","../02-base/02-html-elements/15-inline-elements/_inline-elements.scss","../02-base/02-html-elements/16-blockquote/_blockquote.scss","../02-base/02-html-elements/17-preformatted-text/_preformatted-text.scss","../02-base/02-html-elements/18-horizontal-rule/_horizontal-rule.scss","../02-base/02-html-elements/19-address/_address.scss","../02-base/02-html-elements/20-unordered-list/_unordered-list.scss","../02-base/02-html-elements/21-ordered-list/_ordered-list.scss","../02-base/02-html-elements/22-list-item/_list-item.scss","../02-base/02-html-elements/23-definition-list/_definition-list.scss","../02-base/02-html-elements/24-table/_table.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_width.scss","../02-base/02-html-elements/25-forms/_forms.scss","../02-base/02-html-elements/26-media/_audio.scss","../02-base/02-html-elements/26-media/_canvas.scss","../02-base/02-html-elements/26-media/_figure.scss","../02-base/02-html-elements/26-media/_img.scss","../02-base/02-html-elements/26-media/_svg.scss","../02-base/03-extendables/_dark-bg-links.scss","../00-config/01-mixins/_mixins.svg-background.scss","definition/definition.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACpBA;ECiCI,kBAAA;EACA,eAAA;EDhCF,gBAAA;EACA,iBAAA;AEk1CF;AFh1CE;EACE,gBAAA;AEk1CJ;AF/0CE;;;EAEE,kBAAA;AEk1CJ;;AF90CA;EACE,qBAAA;EACA,eAAA;AEi1CF;AF/0CE;EACE,gBAAA;AEi1CJ;;ACz2CA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AF+1CJ;AEp2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AFs2CJ;AE32CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AF62CJ;AEl3CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFo3CJ;AEz3CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;AF23CJ;AEh4CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFk4CJ;AEv4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;AFy4CJ;AE94CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;AFg5CJ;AEr5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFu5CJ;AE55CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;AF85CJ;AEn6CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AFq6CJ;AE16CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;AF46CJ;AEj7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AFm7CJ;AEx7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;AF07CJ;AE/7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AFi8CJ;AEt8CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;AFw8CJ;AE78CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;AF+8CJ;AEp9CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFs9CJ;AC19CA,qBAAA;AEPA;ETiCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AHs+CF;AO1+CI;EJVJ;IAiBI,WAAA;EHu+CF;AACF;AGr+CE;EACE,YAAA;AHu+CJ;AGp+CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AHs+CJ;AGn+CE;EEnBA,YAAA;ECIA,yBAAA;ANs/CF;AGl+CE;EAEE,uBAAA;AHm+CJ;AGh+CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;ATihDF;AS/gDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AT4gDJ;;AGt+CA;EElCE,cAAA;ECIA,yBAAA;ANygDF;AGx+CE;EErCA,cAAA;ECIA,yBAAA;AN6gDF;AGx+CE;EEzCA,cAAA;ECIA,yBAAA;ANihDF;AGv+CE;EE9CA,YAAA;ECIA,yBAAA;ANqhDF;;AGr+CA;EEpDE,cAAA;ECIA,yBAAA;AN0hDF;AGv+CE;EEvDA,cAAA;ECIA,yBAAA;AN8hDF;AGv+CE;EE3DA,YAAA;ECIA,yBAAA;ANkiDF;AGt+CE;EEhEA,YAAA;ECIA,yBAAA;ANsiDF;;AGp+CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHu+CF;AGr+CE;EACE,cAAA;AHu+CJ;AGp+CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHq+CJ;AGl+CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHm+CJ;AGh+CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;AH89CJ;AG59CI;EACE,cAAA;AH89CN;AG39CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AH49CN;AGz9CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;AH09CN;AGv9CI;EKpIF,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AHo+CN;AL1iDE;EACE,cAAA;AK4iDJ;ALziDE;EACE,cAAA;AK2iDJ;ALxiDE;EACE,cAAA;AK0iDJ;ALviDE;EgBpEA,8BAAA;EACA,iBAAA;AX8mDF;AU1mDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV4lDJ;AUzlDE;EAEE,cAAA;AV0lDJ;AUvlDE;EACE,cAAA;AVylDJ;AUtlDE;EACE,cAAA;AVwlDJ;AG//CM;EACE,cAAA;AHigDR;AG9/CM;EAEE,cAAA;AH+/CR;AG5/CM;EAEE,YAAA;AH6/CR;;AGv/CA;EE3IE,YAAA;ECIA,yBAAA;ANmoDF;AGz/CE;EE9IA,YAAA;ECIA,yBAAA;ANuoDF;AGx/CE;EEnJA,YAAA;ECIA,yBAAA;AN2oDF;;AGt/CA;EEzJE,YAAA;ECIA,yBAAA;ANgpDF;AGx/CE;EE5JA,YAAA;ECIA,yBAAA;ANopDF;AGv/CE;EEjKA,YAAA;ECIA,yBAAA;ANwpDF;;AGr/CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;AHw/CF;;AGr/CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;ATurDF;ASrrDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;ATkrDJ;;AG7/CA;;;;;EAKE,6BAAA;AHggDF;AG9/CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AHmhDJ;;AG/gDA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AHkhDF;AGhhDE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHmhDJ;;AG/gDA;EK7NE,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;AVgvDF;AL3rDE;EACE,cAAA;AK6rDJ;AL1rDE;EACE,cAAA;AK4rDJ;ALzrDE;EACE,cAAA;AK2rDJ;ALxrDE;EgBpEA,8BAAA;EACA,iBAAA;AX+vDF;AU3vDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV6uDJ;AU1uDE;EAEE,cAAA;AV2uDJ;AUxuDE;EACE,cAAA;AV0uDJ;AUvuDE;EACE,cAAA;AVyuDJ;;AYzxDA;EACE,kCAAA;UAAA,0BAAA;EACA,+HAAA;EAAA,uHAAA;EAAA,uGAAA;EAAA,8IAAA;EAEA,8DAAA;UAAA,sDAAA;AZ2xDF;;AYxxDA;EACE;IACE,wCAAA;IACA,mCAAA;YAAA,2BAAA;IACA,sBAAA;IACA,4BAAA;EZ2xDF;;EYxxDA;IACE,WAAA;EZ2xDF;AACF;AYxxDA;EACE,sBAAA;AZ0xDF;;Aa9yDA;ECLE,uCAAA;UAAA,+BAAA;EACA,4BAAA;UAAA,oBAAA;EDMA,eAAA;EACA,gBAAA;AbkzDF;;AetzDA;ErBoCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;EWVA,sBAAA;EACA,cAAA;EACA,SAAA;EACA,UAAA;EACA,qBAAA;Af2zDF;AexzDE;EACE,gBAAA;EACA,iCAAA;Af0zDJ;;AgBt0DE;EADF;IAEI,aAAA;EhB00DF;AACF;;AiB30DA;EACE,kBAAA;AjB80DF;;AkBj1DA;EACE,SAAA;EACA,eAAA;AlBo1DF;AkBl1DE;EAJF;IAKI,aAAA;ElBq1DF;AACF;;AmBz1DA;;;;;;EpBgCI,gBAAA;EACA,aAAA;EqB/BF,WAAA;EACA,mBAAA;EDDA,WAAA;EACA,qBAAA;MAAA,iBAAA;UAAA,aAAA;EACA,kCAAA;AnBo2DF;AoBn2DE;;;;;;EACE,eAAA;ApB02DJ;AmB12DE;EANF;;;;;;IAOI,UAAA;IACA,uBAAA;IACA,SAAA;EnBk3DF;EmBh3DE;;;;;;IACE,qBAAA;EnBu3DJ;AACF;;AmBn3DA;EETM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBm4DN;AsBl4DE;EHQF;IAMI,kBAAA;EnBw3DF;AACF;;AmBr3DA;;EEnBM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBg5DN;AsB/4DE;EHkBF;;IAOI,kBAAA;EnB23DF;AACF;;AmBx3DA;;EE9BM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArB85DN;AsB75DE;EH6BF;;IAOI,iBAAA;EnB83DF;AACF;;AmB33DA;;EEzCM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArB46DN;;AmB53DA;;EEhDM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBo7DN;;AmB73DA;;EEvDM,kRAAA;EAFA,kBAAA;EAEA,mBAAA;EAAA,uBAAA;EAAA,gBAAA;EAAA,yBAAA;ArB87DN;;AuBt8DA;EHWE,gBAAA;EACA,mBAAA;EACA,aAAA;ApB+7DF;AuBz8DE;EAHF;IAII,UAAA;IACA,SAAA;EvB48DF;AACF;AuBx8DI;EACE,oBAAA;AvB08DN;;AwBr9DA;EACE,6BAAA;EACA,cAAA;EACA,qCAAA;AxBw9DF;AwBt9DE;EACE,cAAA;AxBw9DJ;AwBr9DE;EAEE,cAAA;AxBs9DJ;AwBn9DE;EACE,cAAA;AxBq9DJ;AwBl9DE;EACE;IAEE,qBAAA;ExBm9DJ;EwBh9DE;IACE,4BAAA;IACA,kRAAA;IACA,eAAA;IACA,mBAAA;IACA,yBAAA;ExBk9DJ;EwB/8DE;IACE,2CAAA;ExBi9DJ;EwB98DE;IAKE,WAAA;ExB48DJ;AACF;;AwBv8DE;EACE,yBAAA;EACA,qBAAA;AxB08DJ;AsBl/DE;EEsCA;IAKI,gBAAA;ExB28DJ;EwBz8DI;IACE,6BAAA;ExB28DN;AACF;AwBv8DE;EACE,YAAA;AxBy8DJ;AwBt8DE;EACE;IACE,gBAAA;ExBw8DJ;EwBt8DI;IACE,6BAAA;ExBw8DN;AACF;;AwBj8DA;EHrEM,cAAA;EAAA,kRAAA;EAFA,kBAAA;EAEA,kBAAA;EAAA,mBAAA;EAAA,uBAAA;EAAA,gBAAA;ArBghEN;;AwBn8DA;EACE,kBAAA;AxBs8DF;;AwB/7DA;EACE,qBAAA;AxBk8DF;;AwB77DA;EACE,gBAAA;EACA,WAAA;AxBg8DF;;AwBv7DA;EACE,cAAA;AxB07DF;;AwBr7DA;;EAEE,cAAA;EACA,cAAA;EACA,kBAAA;EACA,wBAAA;AxBw7DF;;AwBr7DA;EACE,eAAA;AxBw7DF;;AwBr7DA;EACE,WAAA;AxBw7DF;;AwBj7DA;EACE,kBAAA;AxBo7DF;;AyB3jEA;EJMM,wRAAA;EAFA,iBAAA;EAEA,mBAAA;EAAA,gBAAA;EIJJ,sBAAA;EACA,iCAAA;EACA,WAAA;EACA,kBAAA;EACA,kCAAA;AzBikEF;AyB9jEE;EACE,gBAAA;AzBgkEJ;AyB5jEE;EACE,kBAAA;AzB8jEJ;;AyB1jEA;EACE,cAAA;EACA,cAAA;EACA,gBAAA;AzB6jEF;;AyBvjEE;EACE,cAAA;EACA,oBAAA;EACA,kBAAA;EACA,oBAAA;EACA,oBAAA;AzB0jEJ;AyBpjEI;EACE,8BAAA;EACA,mBAAA;EACA,oBAAA;EACA,oBAAA;AzBsjEN;AyBljEE;EAtBF;IAuBI,wBAAA;EzBqjEF;AACF;;A0BxmEA;EACE,gBAAA;EACA,cAAA;A1B2mEF;A0BxmEE;EACE,gBAAA;A1B0mEJ;A0BvmEE;EATF;IAUI,wBAAA;E1B0mEF;AACF;;A2BrnEA;EACE,yBAAA;EACA,qBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;A3BwnEF;A2BrnEE;EACE,kBAAA;A3BunEJ;;A4BnoEA;EACE,kBAAA;A5BsoEF;;A6BroEA;EAEE,qBAAA;EACA,aAAA;A7BuoEF;A6BpoEI;EACE,eAAA;EACA,kBAAA;A7BsoEN;A6BloEE;EACE,qBAAA;A7BooEJ;A6BjoEE;;EAEE,kBAAA;A7BmoEJ;A6BhoEE;EACE,uBAAA;A7BkoEJ;A6BhoEI;EACE,uBAAA;A7BkoEN;;A8B3pEA;EAEE,aAAA;A9B6pEF;A8B1pEI;EACE,eAAA;EACA,kBAAA;A9B4pEN;A8BxpEE;EACE,qBAAA;A9B0pEJ;A8BvpEE;;EAEE,kBAAA;A9BypEJ;A8BtpEE;EACE,4BAAA;A9BwpEJ;A8BtpEI;EACE,4BAAA;A9BwpEN;;A+BhrEA;EAEE,gBAAA;A/BkrEF;A+BhrEE;EAJF;IAKI,wBAAA;E/BmrEF;AACF;;AgCzrEA;EACE,oBAAA;AhC4rEF;AgCzrEI;EACE,cAAA;EACA,iBAAA;AhC2rEN;;AgCtrEA;EACE,gBAAA;AhCyrEF;;AiCrsEA;EvCoCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;E8BkMA,yBAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;EACA,gBAAA;EAuCA,6CAAA;EA4BA,4CAAA;AlC67DF;AkC7/DI;EACE,4BAAA;EACA,cA/MoB;EAgNpB,gBAAA;EACA,gBAAA;AlC+/DN;AkCz/DI;;EAEE,yBAAA;EACA,cA1NoB;AlCqtE1B;AkCv/DI;EACE,gBAAA;AlCy/DN;AkCt/DE;;EAEE,uBAAA;EACA,yBAAA;EACA,mBAAA;EACA,oBAAA;AlCw/DJ;AkCr/DE;ExC9MA,kRAAA;EACA,eAAA;EwC+ME,gBAAA;EACA,sBAAA;EACA,gBAAA;AlCw/DJ;AkCp/DE;EA1LA,qBAAA;EACA,kBAAA;AlCirEF;AkChrEE;EACE,gCAAA;EACA,0BAAA;EACA,wBAAA;EACA,SAAA;EACA,WAAA;EACA,SAAA;EACA,OAAA;EACA,kBAAA;EACA,WAAA;AlCkrEJ;AkC9/DM;E1B9PJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlC2rEF;ALxtEE;EACE,cAAA;AK0tEJ;ALvtEE;EACE,cAAA;AKytEJ;ALttEE;EACE,cAAA;AKwtEJ;ALrtEE;EgBpEA,8BAAA;EACA,iBAAA;AX4xEF;AUxxEE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV0wEJ;AUvwEE;EAEE,cAAA;AVwwEJ;AUrwEE;EACE,cAAA;AVuwEJ;AUpwEE;EACE,cAAA;AVswEJ;AkCvtEE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlC0tEJ;AkCztEI;EACE,iBAAA;AlC2tEN;AkCjtEE;EACE,aAAA;AlCmtEJ;AkCjtEE;EACE,WAAA;AlCmtEJ;AkChkEI;EAEE,yBAAA;AlCikEN;AkC7jEM;E1BzQJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlCqwEF;ALlyEE;EACE,cAAA;AKoyEJ;ALjyEE;EACE,cAAA;AKmyEJ;ALhyEE;EACE,cAAA;AKkyEJ;AL/xEE;EgBpEA,8BAAA;EACA,iBAAA;AXs2EF;AUl2EE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AVo1EJ;AUj1EE;EAEE,cAAA;AVk1EJ;AU/0EE;EACE,cAAA;AVi1EJ;AU90EE;EACE,cAAA;AVg1EJ;AkCjyEE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlCoyEJ;AkCnyEI;EACE,iBAAA;AlCqyEN;AkCxwEE;EACE,aAlFsB;AlC41E1B;AkC3nEM;E1B/QJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlCy0EF;ALt2EE;EACE,cAAA;AKw2EJ;ALr2EE;EACE,cAAA;AKu2EJ;ALp2EE;EACE,cAAA;AKs2EJ;ALn2EE;EgBpEA,8BAAA;EACA,iBAAA;AX06EF;AUt6EE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AVw5EJ;AUr5EE;EAEE,cAAA;AVs5EJ;AUn5EE;EACE,cAAA;AVq5EJ;AUl5EE;EACE,cAAA;AVo5EJ;AkCr2EE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlCw2EJ;AkCv2EI;EACE,iBAAA;AlCy2EN;AkCn1EE;EACE,aA3EsB;AlCg6E1B;AkCvrEI;EACE,yBAAA;EACA,cA3P2B;AlCo7EjC;AkCrrEE;;EAEE,yBAAA;EACA,cAzQsB;AlCg8E1B;;AiCn9EE;EADF;IAEI,2BAAA;EjCu9EF;AACF;;AiCn9EE;EACE,yBAAA;EACA,gB9GkTqB;A6EoqEzB;;AiCj9EE;EADF;IAEI,wBAAA;EjCq9EF;AACF;;AqCv+EA;EACE,iBAAA;ArC0+EF;;AqCr+EA;EACE,SAAA;EACA,SAAA;EACA,UAAA;ArCw+EF;;AqCh+EA;EACE,mBAAA;ArCm+EF;;AqCv8EA;EACE,SAAA;EACA,8BAAA;UAAA,sBAAA;EACA,cAAA;EACA,cAAA;EACA,SAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;ArC08EF;;AqCr8EA;EACE,gBAAA;ArCw8EF;;AqC77EA;EACE,cAAA;ArCg8EF;;AsC3gFE;EACE,aAAA;EACA,SAAA;AtC8gFJ;;AuCjhFA;EACE,qBAAA;AvCohFF;;AwCrhFA;EACE,SAAA;AxCwhFF;;AyCzhFA;EACE,SAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;AzC4hFF;AyC1hFE;EAPF;IAQI,0BAAA;IACA,wBAAA;EzC6hFF;AACF;;A0CtiFE;EACE,gBAAA;A1CyiFJ;;A2CviFE;EAEE,cAAA;A3CyiFJ;A2CviFI;EACE,4DAAA;A3CyiFN;A2CxiFM;ECDJ,uEAAA;A5C4iFF;A2CriFE;EAGE,WAAA;A3CqiFJ;A2CniFI;EACE,4DAAA;A3CqiFN;A2CpiFM;ECdJ,sEAAA;A5CqjFF;;A6C1jFA;EACE,YAAA;A7C6jFF;A6C1jFI;EACE,cAAA;A7C4jFN;;A6CvjFA;EAEE,yBAAA;EACA,kBAAA;EACA,qBAAA;A7CyjFF;A6CvjFE;EAEE,qBAAA;A7CwjFJ;A6CrjFE;EACE,cAAA;A7CujFJ;;A6CnjFA;EACE,mBAAA;EACA,WAAA;EACA,aAAA;EACA,eAAA;EACA,sBAAA;EACA,gBAAA;EACA,aAAA;EACA,kBAAA;EACA,UAAA;A7CsjFF;A6C/iFA;EACE,cAAA;EACA,cAAA;EACA,wRAAA;EACA,iBAAA;EACA,6BAAA;EACA,qBAAA;A7CijFF","file":"definition.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","@use \"../settings\" as *;\n@use \"../functions/utilities\" as *;\n@use \"../mixins/utilities/margin\" as *;\n\n%usa-list {\n @include u-margin-y(1em);\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n padding-left: 3ch;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ul,\n ol {\n margin-top: 0.25em;\n }\n}\n\n%usa-list-item {\n margin-bottom: 0.25em;\n max-width: measure($theme-text-measure);\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Adds margin either l/r(x) or t/b(y)\n\n@mixin margin-n($side, $value...) {\n $value: unpack($value);\n @if $side == all {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin: get-uswds-value(margin, $value...) #{$important};\n } @else if $side == x {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-left: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n margin-right: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n } @else if $side == y {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-bottom: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n margin-top: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == t {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-top: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == r {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-right: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n } @else if $side == b {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-bottom: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == l {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-left: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n }\n}\n\n@mixin u-margin($value...) {\n @include margin-n(all, $value...);\n}\n\n@mixin u-margin-x($value...) {\n @include margin-n(x, $value...);\n}\n\n@mixin u-margin-y($value...) {\n @include margin-n(y, $value...);\n}\n\n@mixin u-margin-top($value...) {\n @include margin-n(t, $value...);\n}\n\n@mixin u-margin-right($value...) {\n @include margin-n(r, $value...);\n}\n\n@mixin u-margin-bottom($value...) {\n @include margin-n(b, $value...);\n}\n\n@mixin u-margin-left($value...) {\n @include margin-n(l, $value...);\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\nol, ul {\n margin-bottom: 1em;\n margin-top: 1em;\n line-height: 1.5;\n padding-left: 3ch;\n}\nol:last-child, ul:last-child {\n margin-bottom: 0;\n}\nol ul, ul ul,\nol ol,\nul ol {\n margin-top: 0.25em;\n}\n\nli {\n margin-bottom: 0.25em;\n max-width: 68ex;\n}\nli:last-child {\n margin-bottom: 0;\n}\n\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled, .usa-button--outline.usa-button--inverse.definition__trigger {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited, .usa-button--outline.usa-button--inverse.definition__trigger:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.definition__trigger:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.definition__trigger:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus, .usa-button--outline.usa-button--inverse.definition__trigger:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.definition__trigger:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--hover.definition__trigger, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.definition__trigger:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--active.definition__trigger, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.definition__trigger:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled, .usa-button--outline.usa-button--inverse.usa-button--disabled.definition__trigger {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.definition__trigger:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled, .usa-button--outline.usa-button--inverse.usa-button--disabled.definition__trigger {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--hover.definition__trigger {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--active.definition__trigger {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited, .usa-button--outline.usa-button--inverse.definition__trigger:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.definition__trigger:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--hover.definition__trigger {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.definition__trigger:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--active.definition__trigger {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled, .definition__trigger {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited, .definition__trigger:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover, .definition__trigger:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active, .definition__trigger:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus, .definition__trigger:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .definition__trigger:hover, .usa-button--unstyled.usa-button--hover, .usa-button--hover.definition__trigger, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .definition__trigger:active, .usa-button--unstyled.usa-button--active, .usa-button--active.definition__trigger, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .definition__trigger:disabled, .usa-button--unstyled.usa-button--disabled, .usa-button--disabled.definition__trigger {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .definition__trigger:disabled, .usa-button--unstyled.usa-button--disabled, .usa-button--disabled.definition__trigger {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover, .usa-button--hover.definition__trigger {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active, .usa-button--active.definition__trigger {\n color: #162e51;\n}\n\n* {\n transition-duration: 200ms;\n transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform;\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important;\n text-shadow: none !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n[id] {\n scroll-margin-top: 1em;\n}\n\nhtml {\n font-feature-settings: \"kern\" 1;\n font-kerning: normal;\n font-size: 100%;\n min-height: 100%;\n}\n\nbody {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.5;\n background-color: #fff;\n color: #1b1b1b;\n margin: 0;\n padding: 0;\n word-wrap: break-word;\n}\nbody.has-open-mobile-menu {\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n}\n\n@media print {\n nav {\n display: none;\n }\n}\n\nsummary {\n display: list-item;\n}\n\niframe {\n border: 0;\n max-width: 100%;\n}\n@media print {\n iframe {\n display: none;\n }\n}\n\nh6,\n.h6, h5,\n.h5, h4,\n.h4, h3,\n.h3, h2,\n.h2, h1 {\n margin-bottom: 0;\n margin-top: 0;\n clear: none;\n margin-bottom: 1rem;\n clear: none;\n hyphens: none;\n text-rendering: optimizeLegibility;\n}\n* + h6,\n* + .h6, * + h5,\n* + .h5, * + h4,\n* + .h4, * + h3,\n* + .h3, * + h2,\n* + .h2, * + h1 {\n margin-top: 1em;\n}\n@media print {\n h6,\n.h6, h5,\n.h5, h4,\n.h4, h3,\n.h3, h2,\n.h2, h1 {\n orphans: 3;\n page-break-after: avoid;\n widows: 3;\n }\n h6::after,\n.h6::after, h5::after,\n.h5::after, h4::after,\n.h4::after, h3::after,\n.h3::after, h2::after,\n.h2::after, h1::after {\n display: inline-block;\n }\n}\n\nh1 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 2.44rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h1 {\n font-size: 1.95rem;\n }\n}\n\nh2,\n.h2 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.95rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h2,\n.h2 {\n font-size: 1.34rem;\n }\n}\n\nh3,\n.h3 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.34rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h3,\n.h3 {\n font-size: 1.1rem;\n }\n}\n\nh4,\n.h4 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 0.98rem;\n font-weight: 700;\n line-height: 1.2;\n}\n\nh5,\n.h5 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 0.91rem;\n font-weight: 700;\n line-height: 1.2;\n}\n\nh6,\n.h6 {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 0.87rem;\n font-weight: normal;\n letter-spacing: 0.025em;\n line-height: 1.1;\n text-transform: uppercase;\n}\n\np {\n line-height: 1.5;\n margin-bottom: 1rem;\n margin-top: 0;\n}\n@media print {\n p {\n orphans: 3;\n widows: 3;\n }\n}\np:empty {\n margin: 0 !important;\n}\n\na {\n background-color: transparent;\n color: #005ea2;\n -webkit-text-decoration-skip: objects;\n}\na:visited {\n color: #54278f;\n}\na:hover, a:focus {\n color: #1a4480;\n}\na:active {\n color: #162e51;\n}\n@media print {\n a, a:visited {\n text-decoration: none;\n }\n a[href]::after {\n content: \" <\" attr(href) \">\";\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 10pt;\n font-weight: normal;\n text-transform: lowercase;\n }\n a[href^=\"/\"]::after {\n content: \" \";\n }\n a[href^=\"javascript:\"]::after, a[href^=\"mailto:\"]::after, a[href^=\"tel:\"]::after, a[href^=\"#\"]::after, a[href*=\"?\"]::after {\n content: \"\";\n }\n}\n\nabbr[title] {\n border-bottom: 1px dotted;\n text-decoration: none;\n}\n@media (min-width: max-width 40rem) {\n abbr[title] {\n border-bottom: 0;\n }\n abbr[title]::after {\n content: \" (\" attr(title) \")\";\n }\n}\nabbr:hover {\n cursor: help;\n}\n@media print {\n abbr[title] {\n border-bottom: 0;\n }\n abbr[title]::after {\n content: \" (\" attr(title) \")\";\n }\n}\n\ncite {\n color: #565c65;\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 0.93rem;\n font-style: normal;\n font-weight: normal;\n letter-spacing: 0.025em;\n line-height: 1.6;\n}\n\ndfn {\n font-style: normal;\n}\n\nins {\n text-decoration: none;\n}\n\nmark {\n background: #ff0;\n color: #000;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\nvar {\n font-style: normal;\n}\n\nblockquote {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.1rem;\n font-weight: normal;\n line-height: 1.7;\n background-color: #fff;\n border-left: 0.5rem solid #00bde3;\n clear: both;\n margin: 0 0 1.5rem;\n padding: 1.25rem 0 1.25rem 1.25rem;\n}\nblockquote > :last-child {\n margin-bottom: 0;\n}\n* + blockquote {\n margin-top: 1.5rem;\n}\n\nblockquote cite {\n display: block;\n margin: 1rem 0;\n text-align: left;\n}\n\nblockquote p {\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\nblockquote cite em {\n border-left: 1px solid #71767a;\n font-weight: normal;\n margin-left: 0.25rem;\n padding-left: 0.5rem;\n}\n@media print {\n blockquote {\n page-break-inside: avoid;\n }\n}\n\npre {\n margin: 0 0 1rem;\n overflow: auto;\n}\n* + pre {\n margin-top: 1rem;\n}\n@media print {\n pre {\n page-break-inside: avoid;\n }\n}\n\nhr {\n border-top: solid #a9aeb1;\n border-width: 1px 0 0;\n box-sizing: content-box;\n height: 0;\n margin: 0 0 1.5rem;\n overflow: auto;\n}\n* + hr {\n margin-top: 1.5rem;\n}\n\naddress {\n font-style: normal;\n}\n\nul {\n list-style-type: disc;\n margin-top: 0;\n}\n[dir=rtl] ul {\n padding-left: 0;\n padding-right: 3ch;\n}\nul:last-child {\n margin-bottom: revert;\n}\nul ol,\nul ul {\n margin-top: 0.5rem;\n}\nul ul {\n list-style-type: circle;\n}\nul ul ul {\n list-style-type: square;\n}\n\nol {\n margin-top: 0;\n}\n[dir=rtl] ol {\n padding-left: 0;\n padding-right: 3ch;\n}\nol:last-child {\n margin-bottom: revert;\n}\nol ol,\nol ul {\n margin-top: 0.5rem;\n}\nol ol {\n list-style-type: lower-alpha;\n}\nol ol ol {\n list-style-type: lower-roman;\n}\n\nli {\n max-width: unset;\n}\n@media print {\n li {\n page-break-inside: avoid;\n }\n}\n\ndd {\n margin: 0 0 1rem 3ch;\n}\n[dir=rtl] dd {\n margin-left: 0;\n margin-right: 3ch;\n}\n\ndl {\n margin: 0 0 1rem;\n}\n\ntable {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.5;\n border-collapse: collapse;\n border-spacing: 0;\n color: #1b1b1b;\n margin: 1.25rem 0;\n text-align: left;\n /* stylelint-disable selector-class-pattern */\n /* stylelint-enable selector-class-pattern */\n}\ntable thead th {\n background-clip: padding-box;\n color: #1b1b1b;\n font-weight: 700;\n line-height: 1.3;\n}\ntable thead th,\ntable thead td {\n background-color: #dfe1e2;\n color: #1b1b1b;\n}\ntable tbody th {\n text-align: left;\n}\ntable th,\ntable td {\n background-color: white;\n border: 1px solid #1b1b1b;\n font-weight: normal;\n padding: 0.5rem 1rem;\n}\ntable caption {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1rem;\n font-weight: 700;\n margin-bottom: 0.75rem;\n text-align: left;\n}\ntable th[data-sortable] {\n padding-right: 2.5rem;\n position: relative;\n}\ntable th[data-sortable]::after {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-bottom-width: 1px;\n bottom: 0;\n content: \"\";\n height: 0;\n left: 0;\n position: absolute;\n width: 100%;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button, table th[data-sortable][aria-sort=none] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:visited, table th[data-sortable][aria-sort=none] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g.unsorted {\n fill: #1b1b1b;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover .usa-icon > g.unsorted {\n fill: black;\n}\ntable th[data-sortable][aria-sort=descending], table th[data-sortable][aria-sort=ascending] {\n background-color: #97d4ea;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g.descending {\n fill: #1b1b1b;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g.ascending {\n fill: #1b1b1b;\n}\ntable thead th[aria-sort] {\n background-color: #97d4ea;\n color: #1b1b1b;\n}\ntable td[data-sort-active],\ntable th[data-sort-active] {\n background-color: #e1f3f8;\n color: #1b1b1b;\n}\n\n@media print {\n thead {\n display: table-header-group;\n }\n}\n\ntbody th {\n background-color: #f0f0f0;\n font-weight: 700;\n}\n\n@media print {\n tr {\n page-break-inside: avoid;\n }\n}\n\nbutton {\n overflow: visible;\n}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\ninput {\n line-height: normal;\n}\n\nlegend {\n border: 0;\n box-sizing: border-box;\n color: inherit;\n display: table;\n margin: 0;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\noptgroup {\n font-weight: 700;\n}\n\ntextarea {\n overflow: auto;\n}\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\ncanvas {\n display: inline-block;\n}\n\nfigure {\n margin: 0;\n}\n\nimg {\n border: 0;\n font-style: italic;\n height: auto;\n max-width: 100%;\n vertical-align: middle;\n}\n@media print {\n img {\n max-width: 100% !important;\n page-break-inside: avoid;\n }\n}\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n.definition__tooltip a:link, .definition__tooltip a:visited {\n color: #dfe1e2;\n}\n.definition__tooltip a:link::after, .definition__tooltip a:visited::after {\n /* stylelint-disable-next-line selector-no-qualifying-type */\n}\nhtml.no-js .definition__tooltip a:link::after, .definition__tooltip html.no-js a:link::after, html.no-js .definition__tooltip a:visited::after, .definition__tooltip html.no-js a:visited::after {\n background-image: url(\"../images/external-link--gray-2.svg\") !important;\n}\n.definition__tooltip a:hover, .definition__tooltip a:focus, .definition__tooltip a:active {\n color: #fff;\n}\n.definition__tooltip a:hover::after, .definition__tooltip a:focus::after, .definition__tooltip a:active::after {\n /* stylelint-disable-next-line selector-no-qualifying-type */\n}\nhtml.no-js .definition__tooltip a:hover::after, .definition__tooltip html.no-js a:hover::after, html.no-js .definition__tooltip a:focus::after, .definition__tooltip html.no-js a:focus::after, html.no-js .definition__tooltip a:active::after, .definition__tooltip html.no-js a:active::after {\n background-image: url(\"../images/external-link--white.svg\") !important;\n}\n\n.definition {\n cursor: help;\n}\n.definition:focus-within .definition__tooltip {\n display: block;\n}\n\n.definition__trigger {\n border-bottom: 1px dotted;\n position: relative;\n text-decoration: none;\n}\n.definition__trigger:hover, .definition__trigger:focus {\n text-decoration: none;\n}\n.definition__trigger:focus + .definition__tooltip {\n display: block;\n}\n\n.definition__tooltip {\n background: #162e51;\n color: #fff;\n display: none;\n font-size: 1rem;\n margin-top: -0.1875rem;\n max-width: 60rem;\n padding: 1rem;\n position: absolute;\n z-index: 1;\n}\n.definition__term {\n color: #00bde3;\n display: block;\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.1rem;\n font-weight: gesso-bold(bold);\n margin-bottom: 0.5rem;\n}","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Universal styles.\n\n@use '../../../00-config' as *;\n\n* {\n transition-duration: gesso-duration(short);\n transition-property: background-color, border-color, box-shadow, color,\n opacity, text-shadow, transform;\n transition-timing-function: gesso-easing(ease-in);\n}\n\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important;\n text-shadow: none !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n\n[id] {\n scroll-margin-top: 1em;\n}\n","// @file\n// HTML styles.\n\n@use 'sass:math';\n@use '../../../00-config' as *;\n\nhtml {\n @include add-kerning();\n font-size: 100% * math.div(gesso-base-font-size(), 16px);\n min-height: 100%;\n}\n","@mixin add-kerning {\n font-feature-settings: \"kern\" 1;\n font-kerning: normal;\n}\n","// @file\n// Body styles.\n\n@use '../../../00-config' as *;\n\nbody {\n @include typeset();\n background-color: gesso-color(background, site);\n color: gesso-color(text, primary);\n margin: 0;\n padding: 0;\n word-wrap: break-word;\n\n // stylelint-disable selector-no-qualifying-type\n &.has-open-mobile-menu {\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n }\n // stylelint-enable\n\n // Tweak styling in WYSIWYG editor.\n @if $wysiwyg {\n padding: 0 rem(gesso-site-margins(desktop));\n }\n}\n","// @file\n// Nav element styles.\n\nnav {\n @media print {\n display: none;\n }\n}\n","// @file\n// Details element styles.\n\n// details {}\n\nsummary {\n display: list-item;\n}\n","// @file\n// Iframe element styles.\n\niframe {\n border: 0;\n max-width: 100%;\n\n @media print {\n display: none;\n }\n}\n","// @file\n// Heading styles.\n\n@use '../../../00-config' as *;\n\n%hN {\n @include typeset-heading();\n clear: none;\n hyphens: none;\n text-rendering: optimizeLegibility;\n\n @media print {\n orphans: 3;\n page-break-after: avoid;\n widows: 3;\n\n &::after {\n display: inline-block;\n }\n }\n}\n\nh1,\n%h1 {\n @extend %hN;\n @include display-text-style(h1);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, xl);\n }\n}\n\nh2,\n.h2,\n%h2 {\n @extend %hN;\n @include display-text-style(h2);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, lg);\n }\n}\n\nh3,\n.h3,\n%h3 {\n @extend %hN;\n @include display-text-style(h3);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, md);\n }\n}\n\nh4,\n.h4,\n%h4 {\n @extend %hN;\n @include display-text-style(h4);\n}\n\nh5,\n.h5,\n%h5 {\n @extend %hN;\n @include display-text-style(h5);\n}\n\nh6,\n.h6,\n%h6 {\n @extend %hN;\n @include display-text-style(h6);\n}\n","// @file\n// Overrides for USWDS typography mixins\n\n@use '../../00-functions' as *;\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: none;\n margin-bottom: rem(gesso-spacing(2));\n\n * + & {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: rem(gesso-spacing(2));\n margin-top: 0;\n}\n","// @file\n// Display text styles\n\n@use '../00-functions' as *;\n\n@mixin display-text-style($keys...) {\n $display: gesso-get-map(typography, display, $keys...);\n\n @each $property, $value in $display {\n @if ($property == 'font-size') {\n // Check for px if not output value.\n #{$property}: #{rem(convert($value))};\n } @else {\n #{$property}: #{$value};\n }\n }\n}\n","// Mixins: Breakpoint\n// A 16px base value is passed to em() functions within breakpoint mixins due\n// to browsers not using the Gesso base font size for media query calculations.\n\n@use 'sass:string';\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n\n// Create a min-width media query.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint-min($breakpoint) {\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (min-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Assume min-width if shorthand breakpoint mixin is used.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint($breakpoint) {\n @include breakpoint-min($breakpoint) {\n @content;\n }\n}\n\n// Create a max-width media query.\n// @param {Number} $breakpoint - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint value.\n@mixin breakpoint-max($breakpoint, $subtract_1_from_max: false) {\n @if $subtract_1_from_max {\n $breakpoint: px($breakpoint) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (max-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Create a media query with both min-width and max-width.\n// @param {Number} $breakpoint-min - width value.\n// @param {Number} $breakpoint-max - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint-max value.\n@mixin breakpoint-min-max(\n $breakpoint-min,\n $breakpoint-max,\n $subtract_1_from_max: false\n) {\n @if $subtract_1_from_max {\n $breakpoint-max: px($breakpoint-max) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint-min: em($breakpoint-min, 16px);\n $breakpoint-max: em($breakpoint-max, 16px);\n }\n @media (min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max}) {\n @content;\n }\n}\n","// @file\n// Paragraph styles.\n\n@use '../../../00-config' as *;\n\np {\n @include typeset-p();\n\n @media print {\n orphans: 3;\n widows: 3;\n }\n\n // Hide empty paragraphs except in WYSIWYG editor.\n @if not $wysiwyg {\n &:empty {\n margin: 0 !important;\n }\n }\n}\n","// @file\n// Inline element styles.\n\n@use '../../../00-config' as *;\n\na {\n background-color: transparent;\n color: gesso-color(text, link);\n -webkit-text-decoration-skip: objects;\n\n &:visited {\n color: gesso-color(text, link-visited);\n }\n\n &:hover,\n &:focus {\n color: gesso-color(text, link-hover);\n }\n\n &:active {\n color: gesso-color(text, link-active);\n }\n\n @media print {\n &,\n &:visited {\n text-decoration: none;\n }\n\n &[href]::after {\n content: ' <' attr(href) '>';\n font-family: font-family(body);\n font-size: 10pt;\n font-weight: normal;\n text-transform: lowercase;\n }\n\n &[href^='/']::after {\n content: ' ';\n }\n\n &[href^='javascript:']::after,\n &[href^='mailto:']::after,\n &[href^='tel:']::after,\n &[href^='#']::after,\n &[href*='?']::after {\n content: '';\n }\n }\n}\n\nabbr {\n &[title] {\n border-bottom: 1px dotted;\n text-decoration: none;\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n border-bottom: 0;\n\n &::after {\n content: ' (' attr(title) ')';\n }\n }\n }\n\n &:hover {\n cursor: help;\n }\n\n @media print {\n &[title] {\n border-bottom: 0;\n\n &::after {\n content: ' (' attr(title) ')';\n }\n }\n }\n}\n\n// b {}\n\ncite {\n @include display-text-style(cite);\n}\n\n// code {}\n\n// del {}\n\ndfn {\n font-style: normal;\n}\n\n// em {}\n\n// i {}\n\nins {\n text-decoration: none;\n}\n\n// kbd {}\n\nmark {\n background: #ff0;\n color: #000;\n}\n\n// q {}\n\n// s {}\n\n// samp {}\n\nsmall {\n font-size: 80%;\n}\n\n// strong {}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n// time {}\n\n// u {}\n\nvar {\n font-style: normal;\n}\n","// @file\n// Blockquote styles.\n\n@use '../../../00-config' as *;\n\n$blockquote-cite-divider-color: gesso-color(ui, generic, border);\n\n%pull-quote {\n @include display-text-style(blockquote);\n background-color: gesso-grayscale(white);\n border-left: rem(units(1)) solid gesso-brand(aqua, base);\n clear: both;\n margin: 0 0 rem(gesso-spacing(3));\n padding: rem(units($theme-alert-padding-x)) 0\n rem(units($theme-alert-padding-x)) rem(units($theme-alert-padding-x));\n\n > :last-child {\n margin-bottom: 0;\n }\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(3));\n }\n}\n\n%pull-quote__cite {\n display: block;\n margin: rem(gesso-spacing(2)) 0;\n text-align: left;\n}\n\nblockquote {\n @extend %pull-quote;\n\n p {\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n\n cite {\n @extend %pull-quote__cite;\n\n em {\n border-left: 1px solid $blockquote-cite-divider-color;\n font-weight: font-weight(normal);\n margin-left: rem(gesso-spacing('05'));\n padding-left: rem(gesso-spacing(1));\n }\n }\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Preformatted text styles.\n\n@use '../../../00-config' as *;\n\npre {\n margin: 0 0 rem(gesso-spacing(2));\n overflow: auto;\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(2));\n }\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Horizontal rule styles.\n\n@use '../../../00-config' as *;\n\nhr {\n border-top: solid gesso-grayscale(gray-3);\n border-width: 1px 0 0;\n box-sizing: content-box;\n height: 0;\n margin: 0 0 rem(gesso-spacing(3));\n overflow: auto;\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(3));\n }\n}\n","// @file\n// Address element styles.\n\naddress {\n font-style: normal;\n}\n","// @file\n// Unordered list styles.\n\n@use '../../../00-config' as *;\n\nul {\n @extend %usa-list;\n list-style-type: disc;\n margin-top: 0;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n padding-left: 0;\n padding-right: 3ch;\n }\n }\n\n &:last-child {\n margin-bottom: revert;\n }\n\n ol,\n ul {\n margin-top: rem(gesso-spacing(1));\n }\n\n ul {\n list-style-type: circle;\n\n ul {\n list-style-type: square;\n }\n }\n}\n","// @file\n// Ordered list styles.\n\n@use '../../../00-config' as *;\n\nol {\n @extend %usa-list;\n margin-top: 0;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n padding-left: 0;\n padding-right: 3ch;\n }\n }\n\n &:last-child {\n margin-bottom: revert;\n }\n\n ol,\n ul {\n margin-top: rem(gesso-spacing(1));\n }\n\n ol {\n list-style-type: lower-alpha;\n\n ol {\n list-style-type: lower-roman;\n }\n }\n}\n","// @file\n// List item styles.\n\n@use '../../../00-config' as *;\n\nli {\n @extend %usa-list-item;\n max-width: unset;\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Definition list styles.\n\n@use '../../../00-config' as *;\n\ndd {\n margin: 0 0 rem(gesso-spacing(2)) 3ch;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n margin-left: 0;\n margin-right: 3ch;\n }\n }\n}\n\ndl {\n margin: 0 0 rem(gesso-spacing(2));\n}\n\n// dt {}\n","// @file\n// Table styles.\n\n@use '../../../00-config' as *;\n\ntable {\n @include usa-table();\n}\n\nthead {\n @media print {\n display: table-header-group;\n }\n}\n\ntbody {\n th {\n background-color: color('base-lightest');\n font-weight: $theme-font-weight-bold;\n }\n}\n\ntr {\n @media print {\n page-break-inside: avoid;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"button-unstyled\" as *;\n@use \"../helpers\" as *;\n@use \"../utilities\" as *;\n@use \"../typography/typeset\" as *;\n\n$table-text-color: get-color-token-from-bg(\n $bg-color: $theme-body-background-color,\n $preferred-text-token: $theme-table-text-color,\n $context: \"Table text\",\n);\n\n$table-header-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-header-background-color,\n $preferred-text-token: $theme-table-header-text-color,\n $context: \"Table header text\",\n )\n);\n\n$table-stripe-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-stripe-background-color,\n $preferred-text-token: $theme-table-stripe-text-color,\n $context: \"Table stripe text\",\n )\n);\n\n$table-sorted-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-background-color,\n $context: \"Table sorted text\",\n )\n);\n\n$table-sorted-header-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-header-background-color,\n $preferred-text-token: $theme-table-header-text-color,\n $context: \"Table sorted header text\",\n )\n);\n\n$table-sorted-stripe-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-stripe-background-color,\n $preferred-text-token: $theme-table-stripe-text-color,\n $context: \"Table sorted stripe text\",\n )\n);\n\n$table-sorted-icon-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-header-background-color,\n $preferred-text-token: $theme-table-sorted-icon-color,\n $context: \"Table sorted icon\",\n )\n);\n\n$table-unsorted-icon-color: get-color-token-from-bg(\n $bg-color: $theme-table-header-background-color,\n $preferred-text-token: $theme-table-unsorted-icon-color,\n $context: \"Table unsorted icon\",\n);\n\n\n// Shared table styles\n@mixin table-header-unsorted-styles {\n padding-right: units(5);\n position: relative;\n &::after {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-bottom-width: units(1px);\n bottom: 0;\n content: \"\";\n height: 0;\n left: 0;\n position: absolute;\n width: 100%;\n }\n}\n\n@mixin table-button-default-styles {\n @include button-unstyled;\n @include u-square(4);\n background-position: center center;\n background-size: units(3);\n color: color($theme-table-unsorted-icon-color);\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n // vertically center button within table header\n top: 50%;\n transform: translate(0, -50%);\n .usa-icon {\n @include u-square(3);\n vertical-align: middle;\n & > g {\n fill: transparent;\n }\n }\n}\n\n// The SVG in the sortable column button contains three icon shapes.\n// This CSS controls which of the shapes is 'filled' when active.\n\n@mixin table-button-unsorted-styles {\n @include table-button-default-styles;\n .usa-icon > g.unsorted {\n fill: color($table-unsorted-icon-color);\n }\n &:hover .usa-icon > g.unsorted {\n fill: color(\n next-token($table-unsorted-icon-color, \"darker\")\n )\n }\n}\n\n@mixin table-button-sorted-ascending-styles {\n @include table-button-default-styles;\n .usa-icon > g.ascending {\n fill: $table-sorted-icon-color;\n }\n}\n\n@mixin table-button-sorted-descending-styles {\n @include table-button-default-styles;\n .usa-icon > g.descending {\n fill: $table-sorted-icon-color;\n }\n}\n\n@mixin table-stacked-styles {\n thead {\n display: none;\n }\n\n th,\n td {\n border-bottom-width: 0;\n display: block;\n width: 100%;\n }\n\n tr {\n border-bottom: units(0.5) solid color($theme-table-border-color);\n border-top-width: 0;\n display: block;\n width: 100%;\n th:first-child,\n td:first-child {\n border-top-width: 0;\n }\n &:nth-child(odd) {\n td,\n th {\n background-color: inherit;\n }\n }\n\n &:first-child {\n th:first-child,\n td:first-child {\n border-top: units(0.5) solid color($theme-table-border-color);\n }\n }\n }\n\n th[data-label],\n td[data-label] {\n padding-bottom: units(1.5);\n\n &:before {\n content: attr(data-label);\n display: block;\n font-weight: fw(\"bold\");\n margin: units(-1) units(-2) units(0);\n padding: units(1.5) units(2) units(0.5);\n }\n }\n}\n\n@mixin table-stacked-header-styles {\n tr {\n td:first-child,\n th:first-child {\n @include typeset(\n $theme-body-font-family,\n $theme-h4-font-size,\n $theme-heading-line-height\n );\n background-color: color($theme-table-header-background-color);\n color: $table-header-text-color;\n font-weight: fw(\"bold\");\n padding: units(1.5) units(2);\n &:before {\n display: none;\n }\n }\n }\n}\n\n@mixin usa-table {\n @include border-box-sizing;\n @include typeset;\n border-collapse: collapse;\n border-spacing: 0;\n color: color($table-text-color);\n margin: units(2.5) 0;\n text-align: left;\n\n thead {\n th {\n background-clip: padding-box;\n color: $table-header-text-color;\n font-weight: fw(\"bold\");\n line-height: line-height(\n $theme-body-font-family,\n $theme-input-line-height\n );\n }\n\n th,\n td {\n background-color: color($theme-table-header-background-color);\n color: $table-header-text-color;\n }\n }\n tbody {\n th {\n text-align: left;\n }\n }\n th,\n td {\n background-color: color($theme-body-background-color);\n border: 1px solid color($theme-table-border-color);\n font-weight: fw(\"normal\");\n padding: units(1) units(2);\n }\n\n caption {\n @include u-font(\"body\", \"xs\");\n font-weight: fw(\"bold\");\n margin-bottom: units(1.5);\n text-align: left;\n }\n\n /* stylelint-disable selector-class-pattern */\n th[data-sortable] {\n @include table-header-unsorted-styles;\n\n &:not([aria-sort]),\n &[aria-sort=\"none\"] {\n .usa-table__header__button {\n @include table-button-unsorted-styles;\n }\n }\n\n &[aria-sort=\"descending\"],\n &[aria-sort=\"ascending\"] {\n background-color: color($theme-table-sorted-header-background-color);\n }\n\n &[aria-sort=\"descending\"] {\n .usa-table__header__button {\n @include table-button-sorted-descending-styles;\n }\n }\n\n &[aria-sort=\"ascending\"] {\n .usa-table__header__button {\n @include table-button-sorted-ascending-styles;\n }\n }\n }\n /* stylelint-enable selector-class-pattern */\n\n thead {\n th[aria-sort] {\n background-color: color($theme-table-sorted-header-background-color);\n color: $table-sorted-header-text-color;\n }\n }\n\n td[data-sort-active],\n th[data-sort-active] {\n background-color: color($theme-table-sorted-background-color);\n color: $table-sorted-text-color;\n }\n}\n\n\n@mixin usa-table--borderless {\n thead {\n th {\n background-color: transparent;\n border-top: 0;\n color: color($table-text-color);\n\n &[aria-sort] {\n color: $table-sorted-header-text-color;\n }\n }\n /* stylelint-disable selector-class-pattern */\n th[data-sortable]:not([aria-sort]) {\n .usa-table__header__button .usa-icon > g.unsorted {\n fill: color($table-text-color);\n }\n\n .usa-table__header__button:hover .usa-icon > g.unsorted {\n fill: color(\n next-token($table-text-color, \"darker\")\n );\n }\n }\n /* stylelint-enable selector-class-pattern */\n }\n\n th,\n td {\n border-left: 0;\n border-right: 0;\n }\n}\n\n@mixin usa-table--compact {\n th,\n td {\n padding: units(0.5) units(1.5);\n }\n}\n\n@mixin usa-table--striped {\n tbody {\n tr:nth-child(odd) {\n td,\n th {\n background-color: color($theme-table-stripe-background-color);\n color: $table-stripe-text-color;\n &[data-sort-active] {\n background-color: color($theme-table-sorted-stripe-background-color);\n color: $table-sorted-stripe-text-color;\n }\n }\n }\n }\n}\n\n@mixin usa-table--stacked {\n @include table-stacked-styles;\n}\n\n@mixin usa-table--stacked-header {\n @include table-stacked-styles;\n @include table-stacked-header-styles;\n}\n\n@mixin usa-table-container--scrollable {\n margin: units(2.5) 0;\n overflow-y: hidden;\n\n .usa-table {\n margin: 0;\n }\n\n td {\n white-space: nowrap;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs height\n\n@mixin u-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n height: get-uswds-value(\"height\", $value...) #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs width\n\n@mixin u-width($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n width: get-uswds-value(\"width\", $value...) #{$important};\n}\n","// @file\n// Form element styles.\n\n@use '../../../00-config' as *;\n\n// Don’t style button elements, since they’re often styled as links for\n// accessible widgets. Use the .button class in components/button.\nbutton {\n overflow: visible;\n}\n\n// datalist {}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n// form {}\n\n// Don't style button, submit, or reset elements, since they're often styled as\n// links for accessible widgets. Use the .button class in\n// partials/components/button.\ninput {\n line-height: normal;\n}\n\n// input[type='button'] {}\n// input[type='checkbox'] {}\n// input[type='color'] {}\n// input[type='date'] {}\n// input[type='datetime'] {}\n// input[type='datetime-local'] {}\n// input[type='email'] {}\n// input[type='file'] {}\n// input[type='image'] {}\n// input[type='month'] {}\n// input[type='number'] {}\n// input[type='password'] {}\n// input[type='radio'] {}\n// input[type='range'] {}\n// input[type='reset'] {}\n// input[type='search'] {}\n// input[type='submit'] {}\n// input[type='tel'] {}\n// input[type='text'] {}\n// input[type='time'] {}\n// input[type='url'] {}\n// input[type='week'] {}\n\n// label {}\n\nlegend {\n border: 0;\n box-sizing: border-box;\n color: inherit;\n display: table;\n margin: 0;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\n// meter {}\n\noptgroup {\n font-weight: font-weight(bold);\n}\n\n// option {}\n\n// output {}\n\n// progress {}\n\n// select {}\n\ntextarea {\n overflow: auto;\n}\n","// @file\n// Audio element styles.\n\naudio {\n &:not([controls]) {\n display: none;\n height: 0;\n }\n}\n","// @file\n// Canvas element styles.\n\ncanvas {\n display: inline-block;\n}\n","// @file\n// Figure element styles.\n\nfigure {\n margin: 0;\n}\n\n// figcaption {}\n","// @file\n// IMG element styles.\n\nimg {\n border: 0;\n font-style: italic; // Makes alt text stand out from surrounding text.\n height: auto;\n max-width: 100%;\n vertical-align: middle;\n\n @media print {\n max-width: 100% !important;\n page-break-inside: avoid;\n }\n}\n","// @file\n// SVG element styles.\n\nsvg {\n &:not(:root) {\n overflow: hidden;\n }\n}\n","// @file\n// Dark Background Links\n\n@use '../../00-config' as *;\n\n// Dark gray background with white links.\n%dark-bg-link {\n &:link,\n &:visited {\n color: gesso-grayscale(gray-2);\n\n &::after {\n /* stylelint-disable-next-line selector-no-qualifying-type */\n html.no-js & {\n @include svg-background-important(external-link--gray-2);\n }\n }\n }\n\n &:hover,\n &:focus,\n &:active {\n color: gesso-grayscale(white);\n\n &::after {\n /* stylelint-disable-next-line selector-no-qualifying-type */\n html.no-js & {\n @include svg-background-important(external-link--white);\n }\n }\n }\n}\n","// @file\n// SVG background image\n\n@use '../00-functions' as *;\n\n@mixin svg-background($image-name, $image-location: '../images/') {\n $url: $image-location + $image-name + '.svg';\n background-image: url($url);\n}\n\n@mixin svg-background-important($image-name, $image-location: '../images/') {\n $url: $image-location + $image-name + '.svg';\n background-image: url($url) !important;\n}\n\n@mixin svgz-background($image-name, $image-location: '../images/') {\n $url: $image-location + $image-name + '.svgz';\n background-image: url($url);\n}\n\n@mixin svg-background-inline($image-name, $image-location: '../images/') {\n background-image: inline($image-location + $image-name + '.svg');\n}\n\n@mixin svgz-background-inline($image-name, $image-location: '../images/') {\n background-image: inline($image-location + $image-name + '.svgz');\n}\n","// @file\n// Styles for a Definition.\n\n@use '../../00-config' as *;\n@use '../../02-base' as *;\n@use 'usa-button' as *;\n\n.definition {\n cursor: help;\n\n &:focus-within {\n .definition__tooltip {\n display: block;\n }\n }\n}\n\n.definition__trigger {\n @extend .usa-button--unstyled;\n border-bottom: 1px dotted;\n position: relative;\n text-decoration: none;\n\n &:hover,\n &:focus {\n text-decoration: none;\n }\n\n &:focus + .definition__tooltip {\n display: block;\n }\n}\n\n.definition__tooltip {\n background: gesso-brand(blue, dark-1);\n color: gesso-grayscale(white);\n display: none;\n font-size: font-size(body, xs);\n margin-top: rem(-3px);\n max-width: rem(960px);\n padding: gesso-spacing(2);\n position: absolute;\n z-index: 1;\n\n a {\n @extend %dark-bg-link;\n }\n}\n\n.definition__term {\n color: gesso-brand(aqua, base);\n display: block;\n font-family: font-family(heading);\n font-size: font-size(heading, md);\n font-weight: gesso-bold(bold);\n margin-bottom: gesso-spacing(1);\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/hero-slideshow/hero-slideshow.css b/services/drupal/web/themes/epa_theme/css/hero-slideshow/hero-slideshow.css new file mode 100644 index 0000000000..c772a76ab7 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/hero-slideshow/hero-slideshow.css @@ -0,0 +1,2038 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button, .button, .button:focus, .hero-slideshow__nav-button, .hero-slideshow__nav-button:focus { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button, .button, .button:focus, .hero-slideshow__nav-button, .hero-slideshow__nav-button:focus { + width: auto; + } +} +.usa-button:visited, .button:visited, .hero-slideshow__nav-button:visited { + color: white; +} +.usa-button:hover, .button:hover, .hero-slideshow__nav-button:hover, .button:focus, .hero-slideshow__nav-button:focus, .usa-button.usa-button--hover, .usa-button--hover.button, .usa-button--hover.hero-slideshow__nav-button { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .button:active, .hero-slideshow__nav-button:active, .usa-button.usa-button--active, .usa-button--active.button, .usa-button--active.hero-slideshow__nav-button { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .button:not([disabled]):focus, .hero-slideshow__nav-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus, .button:not([disabled]).usa-focus, .hero-slideshow__nav-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled, .button:disabled, .hero-slideshow__nav-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .button:disabled:hover, .hero-slideshow__nav-button:disabled:hover, .button:disabled:focus, .hero-slideshow__nav-button:disabled:focus, .usa-button:disabled.usa-button--hover, .button:disabled.usa-button--hover, .hero-slideshow__nav-button:disabled.usa-button--hover, .usa-button:disabled:active, .button:disabled:active, .hero-slideshow__nav-button:disabled:active, .usa-button:disabled.usa-button--active, .button:disabled.usa-button--active, .hero-slideshow__nav-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus, .button:disabled.usa-focus, .hero-slideshow__nav-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.button:focus, .usa-button--accent-cool.hero-slideshow__nav-button:focus, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.button:focus, .usa-button--accent-warm.hero-slideshow__nav-button:focus, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.button:focus, .usa-button--outline.hero-slideshow__nav-button:focus, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.button:focus, .usa-button--outline.usa-button--inverse.hero-slideshow__nav-button:focus, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.button:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.hero-slideshow__nav-button:focus { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.button:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.hero-slideshow__nav-button:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.button:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.hero-slideshow__nav-button:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.button:focus, .usa-button--base.hero-slideshow__nav-button:focus, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.button:focus, .usa-button--secondary.hero-slideshow__nav-button:focus, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover, .usa-button--unstyled.button:focus, .usa-button--unstyled.hero-slideshow__nav-button:focus { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.button:focus, .usa-button--unstyled.hero-slideshow__nav-button:focus, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +.button, .hero-slideshow__nav-button { + margin-bottom: 0.5rem; + margin-right: 0; +} +.button:focus, .hero-slideshow__nav-button:focus { + z-index: 1; +} +@media (min-width: 30em) { + .button, .hero-slideshow__nav-button { + margin-right: 0.5rem; + } +} + +.tns-outer { + padding: 0 !important; +} +.tns-outer [hidden] { + display: none !important; +} +.tns-outer [aria-controls], .tns-outer [data-action] { + cursor: pointer; +} + +.tns-slider { + -webkit-transition: all 0s; + -moz-transition: all 0s; + transition: all 0s; +} +.tns-slider > .tns-item { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.tns-horizontal.tns-subpixel { + white-space: nowrap; +} +.tns-horizontal.tns-subpixel > .tns-item { + display: inline-block; + vertical-align: top; + white-space: normal; +} +.tns-horizontal.tns-no-subpixel:after { + content: ""; + display: table; + clear: both; +} +.tns-horizontal.tns-no-subpixel > .tns-item { + float: left; +} +.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item { + margin-right: -100%; +} + +.tns-no-calc { + position: relative; + left: 0; +} + +.tns-gallery { + position: relative; + left: 0; + min-height: 1px; +} +.tns-gallery > .tns-item { + position: absolute; + left: -100%; + -webkit-transition: transform 0s, opacity 0s; + -moz-transition: transform 0s, opacity 0s; + -webkit-transition: opacity 0s, -webkit-transform 0s; + transition: opacity 0s, -webkit-transform 0s; + transition: transform 0s, opacity 0s; + transition: transform 0s, opacity 0s, -webkit-transform 0s; +} +.tns-gallery > .tns-slide-active { + position: relative; + left: auto !important; +} +.tns-gallery > .tns-moving { + -webkit-transition: all 0.25s; + -moz-transition: all 0.25s; + transition: all 0.25s; +} + +.tns-autowidth { + display: inline-block; +} + +.tns-lazy-img { + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + transition: opacity 0.6s; + opacity: 0.6; +} +.tns-lazy-img.tns-complete { + opacity: 1; +} + +.tns-ah { + -webkit-transition: height 0s; + -moz-transition: height 0s; + transition: height 0s; +} + +.tns-ovh { + overflow: hidden; +} + +.tns-visually-hidden { + position: absolute; + left: -10000em; +} + +.tns-transparent { + opacity: 0; + visibility: hidden; +} + +.tns-fadeIn { + opacity: 1; + filter: alpha(opacity=100); + z-index: 0; +} + +.tns-normal, .tns-fadeOut { + opacity: 0; + filter: alpha(opacity=0); + z-index: -1; +} + +.tns-vpfix { + white-space: nowrap; +} +.tns-vpfix > div, .tns-vpfix > li { + display: inline-block; +} + +.tns-t-subp2 { + margin: 0 auto; + width: 310px; + position: relative; + height: 10px; + overflow: hidden; +} +.tns-t-ct { + width: 2333.3333333333%; + width: -webkit-calc(100% * 70 / 3); + width: -moz-calc(100% * 70 / 3); + width: calc(100% * 70 / 3); + position: absolute; + right: 0; +} +.tns-t-ct:after { + content: ""; + display: table; + clear: both; +} +.tns-t-ct > div { + width: 1.4285714286%; + width: -webkit-calc(100% / 70); + width: -moz-calc(100% / 70); + width: calc(100% / 70); + height: 10px; + float: left; +} + +.hero-slideshow { + margin-bottom: 1.5rem; +} + +.hero-slideshow__list { + list-style-type: none; + margin: 0; + padding: 0; +} +.hero-slideshow__list:last-child { + margin-bottom: 0; +} +.hero-slideshow__list li { + margin: 0; + padding-left: 0; +} +.hero-slideshow__list li::before { + display: none; +} +@supports (display: grid) { + .hero-slideshow__list { + display: grid; + } +} + +.hero-slideshow__item { + max-width: 100%; +} +@supports (display: grid) { + .hero-slideshow__item { + display: -webkit-box !important; + display: -ms-flexbox !important; + display: flex !important; + grid-column: 1/2; + grid-row: 1/2; + position: relative !important; + } +} + +.hero-slideshow__nav { + display: none; + margin-top: -3rem; + min-height: 3rem; + position: relative; +} +.js .hero-slideshow__nav { + display: block; +} + +.hero-slideshow__nav-button { + background-color: #71767a; + margin-right: 0.5rem; + width: auto; +} +.hero-slideshow__nav-button:hover, .hero-slideshow__nav-button:focus { + background-color: #005ea2; +} +.hero-slideshow__nav-button:active, .hero-slideshow__nav-button.tns-nav-active { + background-color: #1a4480; +} +/*# sourceMappingURL=hero-slideshow.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/hero-slideshow/hero-slideshow.css.map b/services/drupal/web/themes/epa_theme/css/hero-slideshow/hero-slideshow.css.map new file mode 100644 index 0000000000..940854ce9e --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/hero-slideshow/hero-slideshow.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","hero-slideshow/hero-slideshow.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","button/_button.scss","../00-config/01-mixins/_mixins.breakpoint.scss","../../../node_modules/tiny-slider/src/tiny-slider.scss","hero-slideshow/hero-slideshow.scss","../00-config/01-mixins/_mixins.list.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;ADs/CJ;;ACl/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq/CF;ACn/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADs/CJ;;ACl/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARmtDF;AL9pDE;EACE,cAAA;AKgqDJ;AL7pDE;EACE,cAAA;AK+pDJ;AL5pDE;EACE,cAAA;AK8pDJ;AL3pDE;EcpEA,8BAAA;EACA,iBAAA;ATkuDF;AQ9tDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARgtDJ;AQ7sDE;EAEE,cAAA;AR8sDJ;AQ3sDE;EACE,cAAA;AR6sDJ;AQ1sDE;EACE,cAAA;AR4sDJ;;AU3vDA;EAEE,qBAAA;EACA,eAAA;AV6vDF;AU3vDE;EAEE,UAAA;AV4vDJ;AW3vDE;EDRF;IAWI,oBAAA;EV4vDF;AACF;;AY5wDA;EACE,qBAAA;AZ+wDF;AY9wDE;EAAW,wBAAA;AZixDb;AYhxDE;EAAiC,eAAA;AZmxDnC;;AYjxDA;EACE,0BAAA;EACA,uBAAA;EACA,kBAAA;AZoxDF;AYnxDE;EACE,8BAAA;EACA,2BAAA;EACA,sBAAA;AZqxDJ;;AYhxDE;EACE,mBAAA;AZmxDJ;AYlxDI;EACE,qBAAA;EACA,mBAAA;EACA,mBAAA;AZoxDN;AYhxDI;EACE,WAAA;EACA,cAAA;EACA,WAAA;AZkxDN;AYhxDI;EACE,WAAA;AZkxDN;AY7wDM;EACE,mBAAA;AZ+wDR;;AY1wDA;EACE,kBAAA;EACA,OAAA;AZ6wDF;;AY3wDA;EACE,kBAAA;EACA,OAAA;EACA,eAAA;AZ8wDF;AY5wDE;EACE,kBAAA;EACA,WAAA;EACA,4CAAA;EACA,yCAAA;EACA,oDAAA;EAAA,4CAAA;EAAA,oCAAA;EAAA,0DAAA;AZ8wDJ;AY5wDE;EACE,kBAAA;EACA,qBAAA;AZ8wDJ;AY5wDE;EACE,6BAAA;EACA,0BAAA;EACA,qBAAA;AZ8wDJ;;AY3wDA;EAAiB,qBAAA;AZ+wDjB;;AY9wDA;EACE,gCAAA;EACA,6BAAA;EACA,wBAAA;EACA,YAAA;AZixDF;AYhxDE;EAAiB,UAAA;AZmxDnB;;AYjxDA;EACE,6BAAA;EACA,0BAAA;EACA,qBAAA;AZoxDF;;AYlxDA;EAAW,gBAAA;AZsxDX;;AYrxDA;EAAuB,kBAAA;EAAoB,cAAA;AZ0xD3C;;AYzxDA;EAAmB,UAAA;EAAY,kBAAA;AZ8xD/B;;AY5xDA;EACE,UAAA;EACA,0BAAA;EACA,UAAA;AZ+xDF;;AY7xDA;EACE,UAAA;EACA,wBAAA;EACA,WAAA;AZgyDF;;AY3xDA;EACE,mBAAA;AZ8xDF;AY7xDE;EACE,qBAAA;AZ+xDJ;;AYpxDE;EACE,cAAA;EACA,YARI;EASJ,kBAAA;EACA,YATK;EAUL,gBAAA;AZuxDJ;AYrxDE;EACE,uBAAA;EACA,kCAAA;EACA,+BAAA;EACA,0BAAA;EACA,kBAAA;EACA,QAAA;AZuxDJ;AYtxDI;EACE,WAAA;EACA,cAAA;EACA,WAAA;AZwxDN;AYtxDI;EACE,oBAAA;EACA,8BAAA;EACA,2BAAA;EACA,sBAAA;EACA,YA7BG;EA8BH,WAAA;AZwxDN;;Aa75DA;EACE,qBAAA;Abg6DF;;Aa75DA;ECHE,qBAAA;EACA,SAAA;EACA,UAAA;Ado6DF;Acl6DE;EACE,gBAAA;Ado6DJ;Acj6DE;EACE,SAAA;EACA,eAAA;Adm6DJ;Acj6DI;EACE,aAAA;Adm6DN;Aaz6DE;EAJF;IAKI,aAAA;Eb46DF;AACF;;Aaz6DA;EACE,eAAA;Ab46DF;Aaz6DE;EAJF;IAKI,+BAAA;IAAA,+BAAA;IAAA,wBAAA;IACA,gBAAA;IACA,aAAA;IACA,6BAAA;Eb46DF;AACF;;Aaz6DA;EACE,aAAA;EACA,iBAAA;EACA,gBAAA;EACA,kBAAA;Ab46DF;Aa16DE;EACE,cAAA;Ab46DJ;;Aax6DA;EAEE,yBAAA;EACA,oBAAA;EACA,WAAA;Ab06DF;Aax6DE;EAEE,yBAAA;Aby6DJ;Aat6DE;EAEE,yBAAA;Abu6DJ","file":"hero-slideshow.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button, .button, .button:focus, .hero-slideshow__nav-button, .hero-slideshow__nav-button:focus {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button, .button, .button:focus, .hero-slideshow__nav-button, .hero-slideshow__nav-button:focus {\n width: auto;\n }\n}\n.usa-button:visited, .button:visited, .hero-slideshow__nav-button:visited {\n color: white;\n}\n.usa-button:hover, .button:hover, .hero-slideshow__nav-button:hover, .button:focus, .hero-slideshow__nav-button:focus, .usa-button.usa-button--hover, .usa-button--hover.button, .usa-button--hover.hero-slideshow__nav-button {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .button:active, .hero-slideshow__nav-button:active, .usa-button.usa-button--active, .usa-button--active.button, .usa-button--active.hero-slideshow__nav-button {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .button:not([disabled]):focus, .hero-slideshow__nav-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus, .button:not([disabled]).usa-focus, .hero-slideshow__nav-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled, .button:disabled, .hero-slideshow__nav-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .button:disabled:hover, .hero-slideshow__nav-button:disabled:hover, .button:disabled:focus, .hero-slideshow__nav-button:disabled:focus, .usa-button:disabled.usa-button--hover, .button:disabled.usa-button--hover, .hero-slideshow__nav-button:disabled.usa-button--hover, .usa-button:disabled:active, .button:disabled:active, .hero-slideshow__nav-button:disabled:active, .usa-button:disabled.usa-button--active, .button:disabled.usa-button--active, .hero-slideshow__nav-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus, .button:disabled.usa-focus, .hero-slideshow__nav-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.button:focus, .usa-button--accent-cool.hero-slideshow__nav-button:focus, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.button:focus, .usa-button--accent-warm.hero-slideshow__nav-button:focus, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.button:focus, .usa-button--outline.hero-slideshow__nav-button:focus, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.button:focus, .usa-button--outline.usa-button--inverse.hero-slideshow__nav-button:focus, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.button:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.hero-slideshow__nav-button:focus {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.button:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.hero-slideshow__nav-button:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.button:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.hero-slideshow__nav-button:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.button:focus, .usa-button--base.hero-slideshow__nav-button:focus, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.button:focus, .usa-button--secondary.hero-slideshow__nav-button:focus, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.button:focus, .usa-button--unstyled.hero-slideshow__nav-button:focus {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.button:focus, .usa-button--unstyled.hero-slideshow__nav-button:focus, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.button, .hero-slideshow__nav-button {\n margin-bottom: 0.5rem;\n margin-right: 0;\n}\n.button:focus, .hero-slideshow__nav-button:focus {\n z-index: 1;\n}\n@media (min-width: 30em) {\n .button, .hero-slideshow__nav-button {\n margin-right: 0.5rem;\n }\n}\n\n.tns-outer {\n padding: 0 !important;\n}\n.tns-outer [hidden] {\n display: none !important;\n}\n.tns-outer [aria-controls], .tns-outer [data-action] {\n cursor: pointer;\n}\n\n.tns-slider {\n -webkit-transition: all 0s;\n -moz-transition: all 0s;\n transition: all 0s;\n}\n.tns-slider > .tns-item {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.tns-horizontal.tns-subpixel {\n white-space: nowrap;\n}\n.tns-horizontal.tns-subpixel > .tns-item {\n display: inline-block;\n vertical-align: top;\n white-space: normal;\n}\n.tns-horizontal.tns-no-subpixel:after {\n content: \"\";\n display: table;\n clear: both;\n}\n.tns-horizontal.tns-no-subpixel > .tns-item {\n float: left;\n}\n.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item {\n margin-right: -100%;\n}\n\n.tns-no-calc {\n position: relative;\n left: 0;\n}\n\n.tns-gallery {\n position: relative;\n left: 0;\n min-height: 1px;\n}\n.tns-gallery > .tns-item {\n position: absolute;\n left: -100%;\n -webkit-transition: transform 0s, opacity 0s;\n -moz-transition: transform 0s, opacity 0s;\n transition: transform 0s, opacity 0s;\n}\n.tns-gallery > .tns-slide-active {\n position: relative;\n left: auto !important;\n}\n.tns-gallery > .tns-moving {\n -webkit-transition: all 0.25s;\n -moz-transition: all 0.25s;\n transition: all 0.25s;\n}\n\n.tns-autowidth {\n display: inline-block;\n}\n\n.tns-lazy-img {\n -webkit-transition: opacity 0.6s;\n -moz-transition: opacity 0.6s;\n transition: opacity 0.6s;\n opacity: 0.6;\n}\n.tns-lazy-img.tns-complete {\n opacity: 1;\n}\n\n.tns-ah {\n -webkit-transition: height 0s;\n -moz-transition: height 0s;\n transition: height 0s;\n}\n\n.tns-ovh {\n overflow: hidden;\n}\n\n.tns-visually-hidden {\n position: absolute;\n left: -10000em;\n}\n\n.tns-transparent {\n opacity: 0;\n visibility: hidden;\n}\n\n.tns-fadeIn {\n opacity: 1;\n filter: alpha(opacity=100);\n z-index: 0;\n}\n\n.tns-normal, .tns-fadeOut {\n opacity: 0;\n filter: alpha(opacity=0);\n z-index: -1;\n}\n\n.tns-vpfix {\n white-space: nowrap;\n}\n.tns-vpfix > div, .tns-vpfix > li {\n display: inline-block;\n}\n\n.tns-t-subp2 {\n margin: 0 auto;\n width: 310px;\n position: relative;\n height: 10px;\n overflow: hidden;\n}\n.tns-t-ct {\n width: 2333.3333333333%;\n width: -webkit-calc(100% * 70 / 3);\n width: -moz-calc(100% * 70 / 3);\n width: calc(100% * 70 / 3);\n position: absolute;\n right: 0;\n}\n.tns-t-ct:after {\n content: \"\";\n display: table;\n clear: both;\n}\n.tns-t-ct > div {\n width: 1.4285714286%;\n width: -webkit-calc(100% / 70);\n width: -moz-calc(100% / 70);\n width: calc(100% / 70);\n height: 10px;\n float: left;\n}\n\n.hero-slideshow {\n margin-bottom: 1.5rem;\n}\n\n.hero-slideshow__list {\n list-style-type: none;\n margin: 0;\n padding: 0;\n}\n.hero-slideshow__list:last-child {\n margin-bottom: 0;\n}\n.hero-slideshow__list li {\n margin: 0;\n padding-left: 0;\n}\n.hero-slideshow__list li::before {\n display: none;\n}\n@supports (display: grid) {\n .hero-slideshow__list {\n display: grid;\n }\n}\n\n.hero-slideshow__item {\n max-width: 100%;\n}\n@supports (display: grid) {\n .hero-slideshow__item {\n display: flex !important;\n grid-column: 1/2;\n grid-row: 1/2;\n position: relative !important;\n }\n}\n\n.hero-slideshow__nav {\n display: none;\n margin-top: -3rem;\n min-height: 3rem;\n position: relative;\n}\n.js .hero-slideshow__nav {\n display: block;\n}\n\n.hero-slideshow__nav-button {\n background-color: #71767a;\n margin-right: 0.5rem;\n width: auto;\n}\n.hero-slideshow__nav-button:hover, .hero-slideshow__nav-button:focus {\n background-color: #005ea2;\n}\n.hero-slideshow__nav-button:active, .hero-slideshow__nav-button.tns-nav-active {\n background-color: #1a4480;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for Button.\n\n@use '../../00-config' as *;\n@use 'usa-button' as *;\n\n.button {\n @extend .usa-button;\n margin-bottom: gesso-spacing(1);\n margin-right: 0;\n\n &:focus {\n @extend .usa-button, :hover;\n z-index: 1;\n }\n\n @include breakpoint(gesso-breakpoint(mobile-lg)) {\n margin-right: gesso-spacing(1);\n }\n}\n","// Mixins: Breakpoint\n// A 16px base value is passed to em() functions within breakpoint mixins due\n// to browsers not using the Gesso base font size for media query calculations.\n\n@use 'sass:string';\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n\n// Create a min-width media query.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint-min($breakpoint) {\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (min-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Assume min-width if shorthand breakpoint mixin is used.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint($breakpoint) {\n @include breakpoint-min($breakpoint) {\n @content;\n }\n}\n\n// Create a max-width media query.\n// @param {Number} $breakpoint - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint value.\n@mixin breakpoint-max($breakpoint, $subtract_1_from_max: false) {\n @if $subtract_1_from_max {\n $breakpoint: px($breakpoint) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (max-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Create a media query with both min-width and max-width.\n// @param {Number} $breakpoint-min - width value.\n// @param {Number} $breakpoint-max - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint-max value.\n@mixin breakpoint-min-max(\n $breakpoint-min,\n $breakpoint-max,\n $subtract_1_from_max: false\n) {\n @if $subtract_1_from_max {\n $breakpoint-max: px($breakpoint-max) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint-min: em($breakpoint-min, 16px);\n $breakpoint-max: em($breakpoint-max, 16px);\n }\n @media (min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max}) {\n @content;\n }\n}\n","// Version: 2.9.4\n\n.tns-outer {\n padding: 0 !important; // remove padding: clientWidth = width + padding (0) = width\n [hidden] { display: none !important; }\n [aria-controls], [data-action] { cursor: pointer; }\n}\n.tns-slider {\n -webkit-transition: all 0s;\n -moz-transition: all 0s;\n transition: all 0s;\n > .tns-item {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n }\n}\n\n.tns-horizontal {\n &.tns-subpixel {\n white-space: nowrap;\n > .tns-item {\n display: inline-block;\n vertical-align: top;\n white-space: normal;\n }\n }\n &.tns-no-subpixel {\n &:after {\n content: '';\n display: table;\n clear: both;\n }\n > .tns-item {\n float: left;\n }\n }\n &.tns-carousel {\n &.tns-no-subpixel {\n > .tns-item {\n margin-right: -100%;\n }\n }\n }\n}\n.tns-no-calc {\n position: relative;\n left: 0;\n}\n.tns-gallery {\n position: relative;\n left: 0;\n min-height: 1px; // make sure slider container is visible\n // overflow: hidden;\n > .tns-item {\n position: absolute;\n left: -100%;\n -webkit-transition: transform 0s, opacity 0s;\n -moz-transition: transform 0s, opacity 0s;\n transition: transform 0s, opacity 0s;\n }\n > .tns-slide-active {\n position: relative;\n left: auto !important;\n }\n > .tns-moving {\n -webkit-transition: all 0.25s;\n -moz-transition: all 0.25s;\n transition: all 0.25s;\n }\n}\n.tns-autowidth { display: inline-block; }\n.tns-lazy-img {\n -webkit-transition: opacity 0.6s;\n -moz-transition: opacity 0.6s;\n transition: opacity 0.6s;\n opacity: 0.6;\n &.tns-complete { opacity: 1; }\n}\n.tns-ah {\n -webkit-transition: height 0s;\n -moz-transition: height 0s;\n transition: height 0s;\n}\n.tns-ovh { overflow: hidden; }\n.tns-visually-hidden { position: absolute; left: -10000em; }\n.tns-transparent { opacity: 0; visibility: hidden; }\n\n.tns-fadeIn {\n opacity: 1;\n filter: alpha(opacity=100);\n z-index: 0;\n}\n.tns-normal, .tns-fadeOut {\n opacity: 0;\n filter: alpha(opacity=0);\n z-index: -1;\n}\n\n\n// *** Fix a viewport issue in initialization\n.tns-vpfix {\n white-space: nowrap;\n > div, > li {\n display: inline-block;\n }\n}\n\n// *** Detecting browser capability ***\n$width: 310px;\n$height: 10px;\n$count: 70;\n$perpage: 3;\n\n.tns-t {\n &-subp2 {\n margin: 0 auto;\n width: $width;\n position: relative;\n height: $height;\n overflow: hidden;\n }\n &-ct {\n width: (100% * $count / $perpage);\n width: -webkit-calc(100% * #{$count} / #{$perpage});\n width: -moz-calc(100% * #{$count} / #{$perpage});\n width: calc(100% * #{$count} / #{$perpage});\n position: absolute;\n right: 0;\n &:after {\n content: '';\n display: table;\n clear: both;\n }\n > div {\n width: (100% / $count);\n width: -webkit-calc(100% / #{$count});\n width: -moz-calc(100% / #{$count});\n width: calc(100% / #{$count});\n height: $height;\n float: left;\n }\n }\n}\n","// @file\n// Styles for a Hero Slideshow.\n\n@use '../../00-config' as *;\n@use '../../05-components/button/button' as *;\n@use 'tiny-slider';\n\n.hero-slideshow {\n margin-bottom: rem(gesso-spacing(3));\n}\n\n.hero-slideshow__list {\n @include list-clean();\n\n // Use CSS grid to set equal height slides.\n @supports (display: grid) {\n display: grid;\n }\n}\n\n.hero-slideshow__item {\n max-width: 100%;\n\n // Use CSS grid to set equal height slides.\n @supports (display: grid) {\n display: flex !important;\n grid-column: 1 / 2;\n grid-row: 1 / 2;\n position: relative !important;\n }\n}\n\n.hero-slideshow__nav {\n display: none;\n margin-top: rem(gesso-spacing(6)) * -1;\n min-height: rem(gesso-spacing(6));\n position: relative;\n\n .js & {\n display: block;\n }\n}\n\n.hero-slideshow__nav-button {\n @extend .button;\n background-color: gesso-grayscale('gray-4');\n margin-right: gesso-spacing(1);\n width: auto;\n\n &:hover,\n &:focus {\n background-color: gesso-brand(blue, base);\n }\n\n &:active,\n &.tns-nav-active {\n background-color: gesso-brand(blue, dark);\n }\n}\n","// @file\n// Various mixins for list styles\n\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n@use 'mixins.breakpoint' as *;\n\n@mixin list-clean {\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n li {\n margin: 0;\n padding-left: 0;\n\n &::before {\n display: none;\n }\n }\n}\n\n@mixin list-inline {\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n\n li {\n margin: 0;\n padding-left: 0;\n }\n\n > li {\n display: inline;\n }\n}\n\n@mixin list-pipeline($pipeline-border-color: gesso-color(ui, generic, border)) {\n @include clearfix();\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n\n > li {\n border-right: 1px solid $pipeline-border-color; // LTR\n display: block;\n float: left; // LTR\n margin-right: 0.75em; // LTR\n padding-left: 0;\n padding-right: 0.75em; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n border-left: 1px solid $pipeline-border-color;\n border-right: 0;\n float: right;\n margin-left: 0.75em;\n margin-right: 0;\n padding-left: 0.75em;\n padding-right: 0;\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.is-active {\n font-weight: gesso-font-weight(bold);\n }\n\n &:last-child {\n border-right: 0; // LTR\n margin-right: 0; // LTR\n padding-right: 0; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n border-left: 0;\n margin-left: 0;\n padding-left: 0;\n }\n }\n }\n }\n}\n\n@mixin list-border(\n $list-border-padding: 0.25rem,\n $list-border-color: gesso-color(ui, generic, border)\n) {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n\n > li {\n border-bottom: 1px solid $list-border-color;\n margin-bottom: 0;\n padding: $list-border-padding;\n }\n}\n\n@mixin list-column(\n $list-column-count: 2,\n $list-column-gap: 2em,\n $list-item-padding: 0.25em\n) {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n\n li {\n padding-left: 0;\n }\n\n > li {\n break-inside: avoid-column;\n display: table; // break-inside alternative for Firefox\n margin-bottom: 0;\n padding-bottom: $list-item-padding; // use padding instead of margin for Safari bug with CSS columns\n }\n\n @include breakpoint(500px) {\n column-count: $list-column-count;\n column-gap: $list-column-gap;\n }\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/hublinks/hublinks.css b/services/drupal/web/themes/epa_theme/css/hublinks/hublinks.css new file mode 100644 index 0000000000..58af5b3e91 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/hublinks/hublinks.css @@ -0,0 +1,1848 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +.hublinks { + line-height: 1.2; +} + +.hublinks__title { + margin-right: 0.5rem; +} + +.hublinks__list { + display: inline; + line-height: 1.2; + list-style: none; + margin: 0; + padding: 0; +} + +.hublinks__list-item { + border-right: 1px solid #565c65; + display: inline; + margin-right: 0.5rem; + padding-right: 0.5rem; +} +.hublinks__list-item:last-child { + border-right: 0; + margin-right: 0; + padding-right: 0; +} +.hublinks__list-item > a { + font-weight: 700; +} +/*# sourceMappingURL=hublinks.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/hublinks/hublinks.css.map b/services/drupal/web/themes/epa_theme/css/hublinks/hublinks.css.map new file mode 100644 index 0000000000..0cdca7477d --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/hublinks/hublinks.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","hublinks/hublinks.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","hublinks/hublinks.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AUlwDA;EACE,gBAAA;AVqwDF;;AUlwDA;EACE,oBAAA;AVqwDF;;AUlwDA;EACE,eAAA;EACA,gBAAA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;AVqwDF;;AUlwDA;EACE,+BAAA;EACA,eAAA;EACA,oBAAA;EACA,qBAAA;AVqwDF;AUnwDE;EACE,eAAA;EACA,eAAA;EACA,gBAAA;AVqwDJ;AUlwDE;EACE,gBAAA;AVowDJ","file":"hublinks.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.hublinks {\n line-height: 1.2;\n}\n\n.hublinks__title {\n margin-right: 0.5rem;\n}\n\n.hublinks__list {\n display: inline;\n line-height: 1.2;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.hublinks__list-item {\n border-right: 1px solid #565c65;\n display: inline;\n margin-right: 0.5rem;\n padding-right: 0.5rem;\n}\n.hublinks__list-item:last-child {\n border-right: 0;\n margin-right: 0;\n padding-right: 0;\n}\n.hublinks__list-item > a {\n font-weight: 700;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for Hublinks.\n\n@use '../../00-config' as *;\n\n.hublinks {\n line-height: gesso-line-height(2);\n}\n\n.hublinks__title {\n margin-right: rem(units(1));\n}\n\n.hublinks__list {\n display: inline;\n line-height: gesso-line-height(2);\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.hublinks__list-item {\n border-right: 1px solid gesso-grayscale('gray-5');\n display: inline;\n margin-right: rem(units(1));\n padding-right: rem(units(1));\n\n &:last-child {\n border-right: 0;\n margin-right: 0;\n padding-right: 0;\n }\n\n > a {\n font-weight: gesso-font-weight(bold);\n }\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/image-gallery/image-gallery.css b/services/drupal/web/themes/epa_theme/css/image-gallery/image-gallery.css new file mode 100644 index 0000000000..bc58d319a2 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/image-gallery/image-gallery.css @@ -0,0 +1,2904 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +ol, ul { + margin-bottom: 1em; + margin-top: 1em; + line-height: 1.5; + padding-left: 3ch; +} +ol:last-child, ul:last-child { + margin-bottom: 0; +} +ol ul, ul ul, +ol ol, +ul ol { + margin-top: 0.25em; +} + +li { + margin-bottom: 0.25em; + max-width: 68ex; +} +li:last-child { + margin-bottom: 0; +} + +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +* { + -webkit-transition-duration: 200ms; + transition-duration: 200ms; + -webkit-transition-property: background-color, border-color, color, opacity, text-shadow, -webkit-box-shadow, -webkit-transform; + transition-property: background-color, border-color, color, opacity, text-shadow, -webkit-box-shadow, -webkit-transform; + transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform; + transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform, -webkit-box-shadow, -webkit-transform; + -webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + +@media print { + * { + background-color: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #000 !important; + text-shadow: none !important; + } + + @page { + margin: 2cm; + } +} +[id] { + scroll-margin-top: 1em; +} + +html { + -webkit-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + -webkit-font-kerning: normal; + font-kerning: normal; + font-size: 100%; + min-height: 100%; +} + +body { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 1.5; + background-color: #fff; + color: #1b1b1b; + margin: 0; + padding: 0; + word-wrap: break-word; +} +body.has-open-mobile-menu { + overflow: hidden; + -webkit-overflow-scrolling: touch; +} + +@media print { + nav { + display: none; + } +} + +summary { + display: list-item; +} + +iframe { + border: 0; + max-width: 100%; +} +@media print { + iframe { + display: none; + } +} + +h6, +.h6, h5, +.h5, h4, +.h4, h3, +.h3, +.image-gallery__title, h2, +.h2, h1 { + margin-bottom: 0; + margin-top: 0; + clear: none; + margin-bottom: 1rem; + clear: none; + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; + text-rendering: optimizeLegibility; +} +* + h6, +* + .h6, * + h5, +* + .h5, * + h4, +* + .h4, * + h3, +* + .h3, +* + .image-gallery__title, * + h2, +* + .h2, * + h1 { + margin-top: 1em; +} +@media print { + h6, +.h6, h5, +.h5, h4, +.h4, h3, +.h3, +.image-gallery__title, h2, +.h2, h1 { + orphans: 3; + page-break-after: avoid; + widows: 3; + } + h6::after, +.h6::after, h5::after, +.h5::after, h4::after, +.h4::after, h3::after, +.h3::after, +.image-gallery__title::after, h2::after, +.h2::after, h1::after { + display: inline-block; + } +} + +h1 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 2.44rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h1 { + font-size: 1.95rem; + } +} + +h2, +.h2 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.95rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h2, +.h2 { + font-size: 1.34rem; + } +} + +h3, +.h3, +.image-gallery__title { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.34rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h3, +.h3, +.image-gallery__title { + font-size: 1.1rem; + } +} + +h4, +.h4 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 0.98rem; + font-weight: 700; + line-height: 1.2; +} + +h5, +.h5 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 0.91rem; + font-weight: 700; + line-height: 1.2; +} + +h6, +.h6 { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 0.87rem; + font-weight: normal; + letter-spacing: 0.025em; + line-height: 1.1; + text-transform: uppercase; +} + +p { + line-height: 1.5; + margin-bottom: 1rem; + margin-top: 0; +} +@media print { + p { + orphans: 3; + widows: 3; + } +} +p:empty { + margin: 0 !important; +} + +a { + background-color: transparent; + color: #005ea2; + -webkit-text-decoration-skip: objects; +} +a:visited { + color: #54278f; +} +a:hover, a:focus { + color: #1a4480; +} +a:active { + color: #162e51; +} +@media print { + a, a:visited { + text-decoration: none; + } + a[href]::after { + content: " <" attr(href) ">"; + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 10pt; + font-weight: normal; + text-transform: lowercase; + } + a[href^="/"]::after { + content: " "; + } + a[href^="javascript:"]::after, a[href^="mailto:"]::after, a[href^="tel:"]::after, a[href^="#"]::after, a[href*="?"]::after { + content: ""; + } +} + +abbr[title] { + border-bottom: 1px dotted; + text-decoration: none; +} +@media (min-width: max-width 40rem) { + abbr[title] { + border-bottom: 0; + } + abbr[title]::after { + content: " (" attr(title) ")"; + } +} +abbr:hover { + cursor: help; +} +@media print { + abbr[title] { + border-bottom: 0; + } + abbr[title]::after { + content: " (" attr(title) ")"; + } +} + +cite { + color: #565c65; + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 0.93rem; + font-style: normal; + font-weight: normal; + letter-spacing: 0.025em; + line-height: 1.6; +} + +dfn { + font-style: normal; +} + +ins { + text-decoration: none; +} + +mark { + background: #ff0; + color: #000; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +var { + font-style: normal; +} + +blockquote { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.1rem; + font-weight: normal; + line-height: 1.7; + background-color: #fff; + border-left: 0.5rem solid #00bde3; + clear: both; + margin: 0 0 1.5rem; + padding: 1.25rem 0 1.25rem 1.25rem; +} +blockquote > :last-child { + margin-bottom: 0; +} +* + blockquote { + margin-top: 1.5rem; +} + +blockquote cite { + display: block; + margin: 1rem 0; + text-align: left; +} + +blockquote p { + color: inherit; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} +blockquote cite em { + border-left: 1px solid #71767a; + font-weight: normal; + margin-left: 0.25rem; + padding-left: 0.5rem; +} +@media print { + blockquote { + page-break-inside: avoid; + } +} + +pre { + margin: 0 0 1rem; + overflow: auto; +} +* + pre { + margin-top: 1rem; +} +@media print { + pre { + page-break-inside: avoid; + } +} + +hr { + border-top: solid #a9aeb1; + border-width: 1px 0 0; + -webkit-box-sizing: content-box; + box-sizing: content-box; + height: 0; + margin: 0 0 1.5rem; + overflow: auto; +} +* + hr { + margin-top: 1.5rem; +} + +address { + font-style: normal; +} + +ul { + list-style-type: disc; + margin-top: 0; +} +[dir=rtl] ul { + padding-left: 0; + padding-right: 3ch; +} +ul:last-child { + margin-bottom: revert; +} +ul ol, +ul ul { + margin-top: 0.5rem; +} +ul ul { + list-style-type: circle; +} +ul ul ul { + list-style-type: square; +} + +ol { + margin-top: 0; +} +[dir=rtl] ol { + padding-left: 0; + padding-right: 3ch; +} +ol:last-child { + margin-bottom: revert; +} +ol ol, +ol ul { + margin-top: 0.5rem; +} +ol ol { + list-style-type: lower-alpha; +} +ol ol ol { + list-style-type: lower-roman; +} + +li { + max-width: unset; +} +@media print { + li { + page-break-inside: avoid; + } +} + +dd { + margin: 0 0 1rem 3ch; +} +[dir=rtl] dd { + margin-left: 0; + margin-right: 3ch; +} + +dl { + margin: 0 0 1rem; +} + +table { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 1.5; + border-collapse: collapse; + border-spacing: 0; + color: #1b1b1b; + margin: 1.25rem 0; + text-align: left; + /* stylelint-disable selector-class-pattern */ + /* stylelint-enable selector-class-pattern */ +} +table thead th { + background-clip: padding-box; + color: #1b1b1b; + font-weight: 700; + line-height: 1.3; +} +table thead th, +table thead td { + background-color: #dfe1e2; + color: #1b1b1b; +} +table tbody th { + text-align: left; +} +table th, +table td { + background-color: white; + border: 1px solid #1b1b1b; + font-weight: normal; + padding: 0.5rem 1rem; +} +table caption { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1rem; + font-weight: 700; + margin-bottom: 0.75rem; + text-align: left; +} +table th[data-sortable] { + padding-right: 2.5rem; + position: relative; +} +table th[data-sortable]::after { + border-bottom-color: transparent; + border-bottom-style: solid; + border-bottom-width: 1px; + bottom: 0; + content: ""; + height: 0; + left: 0; + position: absolute; + width: 100%; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button, table th[data-sortable][aria-sort=none] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:visited, table th[data-sortable][aria-sort=none] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g.unsorted { + fill: #1b1b1b; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover .usa-icon > g.unsorted { + fill: black; +} +table th[data-sortable][aria-sort=descending], table th[data-sortable][aria-sort=ascending] { + background-color: #97d4ea; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g.descending { + fill: #1b1b1b; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g.ascending { + fill: #1b1b1b; +} +table thead th[aria-sort] { + background-color: #97d4ea; + color: #1b1b1b; +} +table td[data-sort-active], +table th[data-sort-active] { + background-color: #e1f3f8; + color: #1b1b1b; +} + +@media print { + thead { + display: table-header-group; + } +} + +tbody th { + background-color: #f0f0f0; + font-weight: 700; +} + +@media print { + tr { + page-break-inside: avoid; + } +} + +button { + overflow: visible; +} + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +input { + line-height: normal; +} + +legend { + border: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: inherit; + display: table; + margin: 0; + max-width: 100%; + padding: 0; + white-space: normal; +} + +optgroup { + font-weight: 700; +} + +textarea { + overflow: auto; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +canvas { + display: inline-block; +} + +figure { + margin: 0; +} + +img { + border: 0; + font-style: italic; + height: auto; + max-width: 100%; + vertical-align: middle; +} +@media print { + img { + max-width: 100% !important; + page-break-inside: avoid; + } +} + +svg:not(:root) { + overflow: hidden; +} + +.tns-outer { + padding: 0 !important; +} +.tns-outer [hidden] { + display: none !important; +} +.tns-outer [aria-controls], .tns-outer [data-action] { + cursor: pointer; +} + +.tns-slider { + -webkit-transition: all 0s; + -moz-transition: all 0s; + transition: all 0s; +} +.tns-slider > .tns-item { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.tns-horizontal.tns-subpixel { + white-space: nowrap; +} +.tns-horizontal.tns-subpixel > .tns-item { + display: inline-block; + vertical-align: top; + white-space: normal; +} +.tns-horizontal.tns-no-subpixel:after { + content: ""; + display: table; + clear: both; +} +.tns-horizontal.tns-no-subpixel > .tns-item { + float: left; +} +.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item { + margin-right: -100%; +} + +.tns-no-calc { + position: relative; + left: 0; +} + +.tns-gallery { + position: relative; + left: 0; + min-height: 1px; +} +.tns-gallery > .tns-item { + position: absolute; + left: -100%; + -webkit-transition: transform 0s, opacity 0s; + -moz-transition: transform 0s, opacity 0s; + -webkit-transition: opacity 0s, -webkit-transform 0s; + transition: opacity 0s, -webkit-transform 0s; + transition: transform 0s, opacity 0s; + transition: transform 0s, opacity 0s, -webkit-transform 0s; +} +.tns-gallery > .tns-slide-active { + position: relative; + left: auto !important; +} +.tns-gallery > .tns-moving { + -webkit-transition: all 0.25s; + -moz-transition: all 0.25s; + transition: all 0.25s; +} + +.tns-autowidth { + display: inline-block; +} + +.tns-lazy-img { + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + transition: opacity 0.6s; + opacity: 0.6; +} +.tns-lazy-img.tns-complete { + opacity: 1; +} + +.tns-ah { + -webkit-transition: height 0s; + -moz-transition: height 0s; + transition: height 0s; +} + +.tns-ovh { + overflow: hidden; +} + +.tns-visually-hidden { + position: absolute; + left: -10000em; +} + +.tns-transparent { + opacity: 0; + visibility: hidden; +} + +.tns-fadeIn { + opacity: 1; + filter: alpha(opacity=100); + z-index: 0; +} + +.tns-normal, .tns-fadeOut { + opacity: 0; + filter: alpha(opacity=0); + z-index: -1; +} + +.tns-vpfix { + white-space: nowrap; +} +.tns-vpfix > div, .tns-vpfix > li { + display: inline-block; +} + +.tns-t-subp2 { + margin: 0 auto; + width: 310px; + position: relative; + height: 10px; + overflow: hidden; +} +.tns-t-ct { + width: 2333.3333333333%; + width: -webkit-calc(100% * 70 / 3); + width: -moz-calc(100% * 70 / 3); + width: calc(100% * 70 / 3); + position: absolute; + right: 0; +} +.tns-t-ct:after { + content: ""; + display: table; + clear: both; +} +.tns-t-ct > div { + width: 1.4285714286%; + width: -webkit-calc(100% / 70); + width: -moz-calc(100% / 70); + width: calc(100% / 70); + height: 10px; + float: left; +} + +.image-gallery { + clear: both; + margin-bottom: 1.5rem; + margin-left: auto; + margin-right: auto; + max-width: 45.5rem; + padding: 0 2.75rem; + position: relative; + /* stylelint-disable */ + /* stylelint-enable */ +} +.image-gallery.gallery_small, .image-gallery.gallery_small_tall { + max-width: 25.5rem; +} +.image-gallery.gallery_large, .image-gallery.gallery_large_tall { + max-width: 65.5rem; +} + +.image-gallery__title { + position: relative; + z-index: 1; +} + +.image-gallery__list { + list-style-type: none; + margin: 0; + padding: 0; +} +.image-gallery__list:last-child { + margin-bottom: 0; +} +.image-gallery__list li { + margin: 0; + padding-left: 0; +} +.image-gallery__list li::before { + display: none; +} + +.image-gallery__nav { + line-height: 0; + padding-bottom: 0.25rem; + position: relative; + z-index: 1; +} + +.image-gallery__nav-button { + background: #aacdec; + border: 0; + border-radius: 50%; + height: 0.5rem; + margin-right: 0.5rem; + padding: 0; + width: 0.5rem; +} +.image-gallery__nav-button.tns-nav-active { + background-color: #4f97d1; +} + +.image-gallery__controls { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; +} +.image-gallery__controls:focus { + outline-offset: 2px; +} +.image-gallery__controls:focus-within { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} + +.image-gallery__next, .image-gallery__prev { + background: #fff; + border: 0; + bottom: 0; + -webkit-box-shadow: 0; + box-shadow: 0; + color: #005ea2; + font-size: 2rem; + padding: 0; + position: absolute; + top: 0; + width: 2.75rem; +} +.image-gallery__next:hover, .image-gallery__prev:hover, .image-gallery__next:focus, .image-gallery__prev:focus, .image-gallery__next:active, .image-gallery__prev:active { + color: #1a4480; + outline: 0 !important; +} + +.image-gallery__prev { + left: 0; +} + +.image-gallery__next { + right: 0; +} +/*# sourceMappingURL=image-gallery.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/image-gallery/image-gallery.css.map b/services/drupal/web/themes/epa_theme/css/image-gallery/image-gallery.css.map new file mode 100644 index 0000000000..c06698e416 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/image-gallery/image-gallery.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/placeholders/_list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_margin.scss","image-gallery/image-gallery.css","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","../02-base/02-html-elements/00-universal/_universal.scss","../02-base/02-html-elements/01-html/_html.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-kerning.scss","../02-base/02-html-elements/02-body/_body.scss","../02-base/02-html-elements/10-nav/_nav.scss","../02-base/02-html-elements/11-details/_details.scss","../02-base/02-html-elements/12-iframe/_iframe.scss","../02-base/02-html-elements/13-headings/_headings.scss","../00-config/01-mixins/uswds-overrides/_mixins.uswds.typography.scss","../00-config/01-mixins/_mixins.display-text-style.scss","../00-config/01-mixins/_mixins.breakpoint.scss","../02-base/02-html-elements/14-paragraph/_paragraph.scss","../02-base/02-html-elements/15-inline-elements/_inline-elements.scss","../02-base/02-html-elements/16-blockquote/_blockquote.scss","../02-base/02-html-elements/17-preformatted-text/_preformatted-text.scss","../02-base/02-html-elements/18-horizontal-rule/_horizontal-rule.scss","../02-base/02-html-elements/19-address/_address.scss","../02-base/02-html-elements/20-unordered-list/_unordered-list.scss","../02-base/02-html-elements/21-ordered-list/_ordered-list.scss","../02-base/02-html-elements/22-list-item/_list-item.scss","../02-base/02-html-elements/23-definition-list/_definition-list.scss","../02-base/02-html-elements/24-table/_table.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_width.scss","../02-base/02-html-elements/25-forms/_forms.scss","../02-base/02-html-elements/26-media/_audio.scss","../02-base/02-html-elements/26-media/_canvas.scss","../02-base/02-html-elements/26-media/_figure.scss","../02-base/02-html-elements/26-media/_img.scss","../02-base/02-html-elements/26-media/_svg.scss","../../../node_modules/tiny-slider/src/tiny-slider.scss","image-gallery/image-gallery.scss","../00-config/01-mixins/_mixins.list.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACpBA;ECiCI,kBAAA;EACA,eAAA;EDhCF,gBAAA;EACA,iBAAA;AEk1CF;AFh1CE;EACE,gBAAA;AEk1CJ;AF/0CE;;;EAEE,kBAAA;AEk1CJ;;AF90CA;EACE,qBAAA;EACA,eAAA;AEi1CF;AF/0CE;EACE,gBAAA;AEi1CJ;;ACz2CA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AF+1CJ;AEp2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AFs2CJ;AE32CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AF62CJ;AEl3CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFo3CJ;AEz3CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;AF23CJ;AEh4CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFk4CJ;AEv4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;AFy4CJ;AE94CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;AFg5CJ;AEr5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFu5CJ;AE55CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;AF85CJ;AEn6CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AFq6CJ;AE16CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;AF46CJ;AEj7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AFm7CJ;AEx7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;AF07CJ;AE/7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AFi8CJ;AEt8CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;AFw8CJ;AE78CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;AF+8CJ;AEp9CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFs9CJ;AC19CA,qBAAA;AEPA;ETiCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AHs+CF;AO1+CI;EJVJ;IAiBI,WAAA;EHu+CF;AACF;AGr+CE;EACE,YAAA;AHu+CJ;AGp+CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AHs+CJ;AGn+CE;EEnBA,YAAA;ECIA,yBAAA;ANs/CF;AGl+CE;EAEE,uBAAA;AHm+CJ;AGh+CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;ATihDF;AS/gDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AT4gDJ;;AGt+CA;EElCE,cAAA;ECIA,yBAAA;ANygDF;AGx+CE;EErCA,cAAA;ECIA,yBAAA;AN6gDF;AGx+CE;EEzCA,cAAA;ECIA,yBAAA;ANihDF;AGv+CE;EE9CA,YAAA;ECIA,yBAAA;ANqhDF;;AGr+CA;EEpDE,cAAA;ECIA,yBAAA;AN0hDF;AGv+CE;EEvDA,cAAA;ECIA,yBAAA;AN8hDF;AGv+CE;EE3DA,YAAA;ECIA,yBAAA;ANkiDF;AGt+CE;EEhEA,YAAA;ECIA,yBAAA;ANsiDF;;AGp+CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHu+CF;AGr+CE;EACE,cAAA;AHu+CJ;AGp+CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHq+CJ;AGl+CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHm+CJ;AGh+CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;AH89CJ;AG59CI;EACE,cAAA;AH89CN;AG39CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AH49CN;AGz9CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;AH09CN;AGv9CI;EKpIF,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AHo+CN;AL1iDE;EACE,cAAA;AK4iDJ;ALziDE;EACE,cAAA;AK2iDJ;ALxiDE;EACE,cAAA;AK0iDJ;ALviDE;EgBpEA,8BAAA;EACA,iBAAA;AX8mDF;AU1mDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV4lDJ;AUzlDE;EAEE,cAAA;AV0lDJ;AUvlDE;EACE,cAAA;AVylDJ;AUtlDE;EACE,cAAA;AVwlDJ;AG//CM;EACE,cAAA;AHigDR;AG9/CM;EAEE,cAAA;AH+/CR;AG5/CM;EAEE,YAAA;AH6/CR;;AGv/CA;EE3IE,YAAA;ECIA,yBAAA;ANmoDF;AGz/CE;EE9IA,YAAA;ECIA,yBAAA;ANuoDF;AGx/CE;EEnJA,YAAA;ECIA,yBAAA;AN2oDF;;AGt/CA;EEzJE,YAAA;ECIA,yBAAA;ANgpDF;AGx/CE;EE5JA,YAAA;ECIA,yBAAA;ANopDF;AGv/CE;EEjKA,YAAA;ECIA,yBAAA;ANwpDF;;AGr/CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;AHw/CF;;AGr/CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;ATurDF;ASrrDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;ATkrDJ;;AG7/CA;;;;;EAKE,6BAAA;AHggDF;AG9/CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AHmhDJ;;AG/gDA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AHkhDF;AGhhDE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHmhDJ;;AG/gDA;EK7NE,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;AVgvDF;AL3rDE;EACE,cAAA;AK6rDJ;AL1rDE;EACE,cAAA;AK4rDJ;ALzrDE;EACE,cAAA;AK2rDJ;ALxrDE;EgBpEA,8BAAA;EACA,iBAAA;AX+vDF;AU3vDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV6uDJ;AU1uDE;EAEE,cAAA;AV2uDJ;AUxuDE;EACE,cAAA;AV0uDJ;AUvuDE;EACE,cAAA;AVyuDJ;;AYzxDA;EACE,kCAAA;UAAA,0BAAA;EACA,+HAAA;EAAA,uHAAA;EAAA,uGAAA;EAAA,8IAAA;EAEA,8DAAA;UAAA,sDAAA;AZ2xDF;;AYxxDA;EACE;IACE,wCAAA;IACA,mCAAA;YAAA,2BAAA;IACA,sBAAA;IACA,4BAAA;EZ2xDF;;EYxxDA;IACE,WAAA;EZ2xDF;AACF;AYxxDA;EACE,sBAAA;AZ0xDF;;Aa9yDA;ECLE,uCAAA;UAAA,+BAAA;EACA,4BAAA;UAAA,oBAAA;EDMA,eAAA;EACA,gBAAA;AbkzDF;;AetzDA;ErBoCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;EWVA,sBAAA;EACA,cAAA;EACA,SAAA;EACA,UAAA;EACA,qBAAA;Af2zDF;AexzDE;EACE,gBAAA;EACA,iCAAA;Af0zDJ;;AgBt0DE;EADF;IAEI,aAAA;EhB00DF;AACF;;AiB30DA;EACE,kBAAA;AjB80DF;;AkBj1DA;EACE,SAAA;EACA,eAAA;AlBo1DF;AkBl1DE;EAJF;IAKI,aAAA;ElBq1DF;AACF;;AmBz1DA;;;;;;;EpBgCI,gBAAA;EACA,aAAA;EqB/BF,WAAA;EACA,mBAAA;EDDA,WAAA;EACA,qBAAA;MAAA,iBAAA;UAAA,aAAA;EACA,kCAAA;AnBq2DF;AoBp2DE;;;;;;;EACE,eAAA;ApB42DJ;AmB52DE;EANF;;;;;;;IAOI,UAAA;IACA,uBAAA;IACA,SAAA;EnBq3DF;EmBn3DE;;;;;;;IACE,qBAAA;EnB23DJ;AACF;;AmBv3DA;EETM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBu4DN;AsBt4DE;EHQF;IAMI,kBAAA;EnB43DF;AACF;;AmBz3DA;;EEnBM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBo5DN;AsBn5DE;EHkBF;;IAOI,kBAAA;EnB+3DF;AACF;;AmB53DA;;;EE9BM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBm6DN;AsBl6DE;EH6BF;;;IAOI,iBAAA;EnBo4DF;AACF;;AmBj4DA;;EEzCM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBk7DN;;AmBl4DA;;EEhDM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArB07DN;;AmBn4DA;;EEvDM,kRAAA;EAFA,kBAAA;EAEA,mBAAA;EAAA,uBAAA;EAAA,gBAAA;EAAA,yBAAA;ArBo8DN;;AuB58DA;EHWE,gBAAA;EACA,mBAAA;EACA,aAAA;ApBq8DF;AuB/8DE;EAHF;IAII,UAAA;IACA,SAAA;EvBk9DF;AACF;AuB98DI;EACE,oBAAA;AvBg9DN;;AwB39DA;EACE,6BAAA;EACA,cAAA;EACA,qCAAA;AxB89DF;AwB59DE;EACE,cAAA;AxB89DJ;AwB39DE;EAEE,cAAA;AxB49DJ;AwBz9DE;EACE,cAAA;AxB29DJ;AwBx9DE;EACE;IAEE,qBAAA;ExBy9DJ;EwBt9DE;IACE,4BAAA;IACA,kRAAA;IACA,eAAA;IACA,mBAAA;IACA,yBAAA;ExBw9DJ;EwBr9DE;IACE,2CAAA;ExBu9DJ;EwBp9DE;IAKE,WAAA;ExBk9DJ;AACF;;AwB78DE;EACE,yBAAA;EACA,qBAAA;AxBg9DJ;AsBx/DE;EEsCA;IAKI,gBAAA;ExBi9DJ;EwB/8DI;IACE,6BAAA;ExBi9DN;AACF;AwB78DE;EACE,YAAA;AxB+8DJ;AwB58DE;EACE;IACE,gBAAA;ExB88DJ;EwB58DI;IACE,6BAAA;ExB88DN;AACF;;AwBv8DA;EHrEM,cAAA;EAAA,kRAAA;EAFA,kBAAA;EAEA,kBAAA;EAAA,mBAAA;EAAA,uBAAA;EAAA,gBAAA;ArBshEN;;AwBz8DA;EACE,kBAAA;AxB48DF;;AwBr8DA;EACE,qBAAA;AxBw8DF;;AwBn8DA;EACE,gBAAA;EACA,WAAA;AxBs8DF;;AwB77DA;EACE,cAAA;AxBg8DF;;AwB37DA;;EAEE,cAAA;EACA,cAAA;EACA,kBAAA;EACA,wBAAA;AxB87DF;;AwB37DA;EACE,eAAA;AxB87DF;;AwB37DA;EACE,WAAA;AxB87DF;;AwBv7DA;EACE,kBAAA;AxB07DF;;AyBjkEA;EJMM,wRAAA;EAFA,iBAAA;EAEA,mBAAA;EAAA,gBAAA;EIJJ,sBAAA;EACA,iCAAA;EACA,WAAA;EACA,kBAAA;EACA,kCAAA;AzBukEF;AyBpkEE;EACE,gBAAA;AzBskEJ;AyBlkEE;EACE,kBAAA;AzBokEJ;;AyBhkEA;EACE,cAAA;EACA,cAAA;EACA,gBAAA;AzBmkEF;;AyB7jEE;EACE,cAAA;EACA,oBAAA;EACA,kBAAA;EACA,oBAAA;EACA,oBAAA;AzBgkEJ;AyB1jEI;EACE,8BAAA;EACA,mBAAA;EACA,oBAAA;EACA,oBAAA;AzB4jEN;AyBxjEE;EAtBF;IAuBI,wBAAA;EzB2jEF;AACF;;A0B9mEA;EACE,gBAAA;EACA,cAAA;A1BinEF;A0B9mEE;EACE,gBAAA;A1BgnEJ;A0B7mEE;EATF;IAUI,wBAAA;E1BgnEF;AACF;;A2B3nEA;EACE,yBAAA;EACA,qBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;A3B8nEF;A2B3nEE;EACE,kBAAA;A3B6nEJ;;A4BzoEA;EACE,kBAAA;A5B4oEF;;A6B3oEA;EAEE,qBAAA;EACA,aAAA;A7B6oEF;A6B1oEI;EACE,eAAA;EACA,kBAAA;A7B4oEN;A6BxoEE;EACE,qBAAA;A7B0oEJ;A6BvoEE;;EAEE,kBAAA;A7ByoEJ;A6BtoEE;EACE,uBAAA;A7BwoEJ;A6BtoEI;EACE,uBAAA;A7BwoEN;;A8BjqEA;EAEE,aAAA;A9BmqEF;A8BhqEI;EACE,eAAA;EACA,kBAAA;A9BkqEN;A8B9pEE;EACE,qBAAA;A9BgqEJ;A8B7pEE;;EAEE,kBAAA;A9B+pEJ;A8B5pEE;EACE,4BAAA;A9B8pEJ;A8B5pEI;EACE,4BAAA;A9B8pEN;;A+BtrEA;EAEE,gBAAA;A/BwrEF;A+BtrEE;EAJF;IAKI,wBAAA;E/ByrEF;AACF;;AgC/rEA;EACE,oBAAA;AhCksEF;AgC/rEI;EACE,cAAA;EACA,iBAAA;AhCisEN;;AgC5rEA;EACE,gBAAA;AhC+rEF;;AiC3sEA;EvCoCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;E8BkMA,yBAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;EACA,gBAAA;EAuCA,6CAAA;EA4BA,4CAAA;AlCm8DF;AkCngEI;EACE,4BAAA;EACA,cA/MoB;EAgNpB,gBAAA;EACA,gBAAA;AlCqgEN;AkC//DI;;EAEE,yBAAA;EACA,cA1NoB;AlC2tE1B;AkC7/DI;EACE,gBAAA;AlC+/DN;AkC5/DE;;EAEE,uBAAA;EACA,yBAAA;EACA,mBAAA;EACA,oBAAA;AlC8/DJ;AkC3/DE;ExC9MA,kRAAA;EACA,eAAA;EwC+ME,gBAAA;EACA,sBAAA;EACA,gBAAA;AlC8/DJ;AkC1/DE;EA1LA,qBAAA;EACA,kBAAA;AlCurEF;AkCtrEE;EACE,gCAAA;EACA,0BAAA;EACA,wBAAA;EACA,SAAA;EACA,WAAA;EACA,SAAA;EACA,OAAA;EACA,kBAAA;EACA,WAAA;AlCwrEJ;AkCpgEM;E1B9PJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlCisEF;AL9tEE;EACE,cAAA;AKguEJ;AL7tEE;EACE,cAAA;AK+tEJ;AL5tEE;EACE,cAAA;AK8tEJ;AL3tEE;EgBpEA,8BAAA;EACA,iBAAA;AXkyEF;AU9xEE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AVgxEJ;AU7wEE;EAEE,cAAA;AV8wEJ;AU3wEE;EACE,cAAA;AV6wEJ;AU1wEE;EACE,cAAA;AV4wEJ;AkC7tEE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlCguEJ;AkC/tEI;EACE,iBAAA;AlCiuEN;AkCvtEE;EACE,aAAA;AlCytEJ;AkCvtEE;EACE,WAAA;AlCytEJ;AkCtkEI;EAEE,yBAAA;AlCukEN;AkCnkEM;E1BzQJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlC2wEF;ALxyEE;EACE,cAAA;AK0yEJ;ALvyEE;EACE,cAAA;AKyyEJ;ALtyEE;EACE,cAAA;AKwyEJ;ALryEE;EgBpEA,8BAAA;EACA,iBAAA;AX42EF;AUx2EE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV01EJ;AUv1EE;EAEE,cAAA;AVw1EJ;AUr1EE;EACE,cAAA;AVu1EJ;AUp1EE;EACE,cAAA;AVs1EJ;AkCvyEE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlC0yEJ;AkCzyEI;EACE,iBAAA;AlC2yEN;AkC9wEE;EACE,aAlFsB;AlCk2E1B;AkCjoEM;E1B/QJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlC+0EF;AL52EE;EACE,cAAA;AK82EJ;AL32EE;EACE,cAAA;AK62EJ;AL12EE;EACE,cAAA;AK42EJ;ALz2EE;EgBpEA,8BAAA;EACA,iBAAA;AXg7EF;AU56EE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV85EJ;AU35EE;EAEE,cAAA;AV45EJ;AUz5EE;EACE,cAAA;AV25EJ;AUx5EE;EACE,cAAA;AV05EJ;AkC32EE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlC82EJ;AkC72EI;EACE,iBAAA;AlC+2EN;AkCz1EE;EACE,aA3EsB;AlCs6E1B;AkC7rEI;EACE,yBAAA;EACA,cA3P2B;AlC07EjC;AkC3rEE;;EAEE,yBAAA;EACA,cAzQsB;AlCs8E1B;;AiCz9EE;EADF;IAEI,2BAAA;EjC69EF;AACF;;AiCz9EE;EACE,yBAAA;EACA,gB9GkTqB;A6E0qEzB;;AiCv9EE;EADF;IAEI,wBAAA;EjC29EF;AACF;;AqC7+EA;EACE,iBAAA;ArCg/EF;;AqC3+EA;EACE,SAAA;EACA,SAAA;EACA,UAAA;ArC8+EF;;AqCt+EA;EACE,mBAAA;ArCy+EF;;AqC78EA;EACE,SAAA;EACA,8BAAA;UAAA,sBAAA;EACA,cAAA;EACA,cAAA;EACA,SAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;ArCg9EF;;AqC38EA;EACE,gBAAA;ArC88EF;;AqCn8EA;EACE,cAAA;ArCs8EF;;AsCjhFE;EACE,aAAA;EACA,SAAA;AtCohFJ;;AuCvhFA;EACE,qBAAA;AvC0hFF;;AwC3hFA;EACE,SAAA;AxC8hFF;;AyC/hFA;EACE,SAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;AzCkiFF;AyChiFE;EAPF;IAQI,0BAAA;IACA,wBAAA;EzCmiFF;AACF;;A0C5iFE;EACE,gBAAA;A1C+iFJ;;A2CljFA;EACE,qBAAA;A3CqjFF;A2CpjFE;EAAW,wBAAA;A3CujFb;A2CtjFE;EAAiC,eAAA;A3CyjFnC;;A2CvjFA;EACE,0BAAA;EACA,uBAAA;EACA,kBAAA;A3C0jFF;A2CzjFE;EACE,8BAAA;EACA,2BAAA;EACA,sBAAA;A3C2jFJ;;A2CtjFE;EACE,mBAAA;A3CyjFJ;A2CxjFI;EACE,qBAAA;EACA,mBAAA;EACA,mBAAA;A3C0jFN;A2CtjFI;EACE,WAAA;EACA,cAAA;EACA,WAAA;A3CwjFN;A2CtjFI;EACE,WAAA;A3CwjFN;A2CnjFM;EACE,mBAAA;A3CqjFR;;A2ChjFA;EACE,kBAAA;EACA,OAAA;A3CmjFF;;A2CjjFA;EACE,kBAAA;EACA,OAAA;EACA,eAAA;A3CojFF;A2CljFE;EACE,kBAAA;EACA,WAAA;EACA,4CAAA;EACA,yCAAA;EACA,oDAAA;EAAA,4CAAA;EAAA,oCAAA;EAAA,0DAAA;A3CojFJ;A2CljFE;EACE,kBAAA;EACA,qBAAA;A3CojFJ;A2CljFE;EACE,6BAAA;EACA,0BAAA;EACA,qBAAA;A3CojFJ;;A2CjjFA;EAAiB,qBAAA;A3CqjFjB;;A2CpjFA;EACE,gCAAA;EACA,6BAAA;EACA,wBAAA;EACA,YAAA;A3CujFF;A2CtjFE;EAAiB,UAAA;A3CyjFnB;;A2CvjFA;EACE,6BAAA;EACA,0BAAA;EACA,qBAAA;A3C0jFF;;A2CxjFA;EAAW,gBAAA;A3C4jFX;;A2C3jFA;EAAuB,kBAAA;EAAoB,cAAA;A3CgkF3C;;A2C/jFA;EAAmB,UAAA;EAAY,kBAAA;A3CokF/B;;A2ClkFA;EACE,UAAA;EACA,0BAAA;EACA,UAAA;A3CqkFF;;A2CnkFA;EACE,UAAA;EACA,wBAAA;EACA,WAAA;A3CskFF;;A2CjkFA;EACE,mBAAA;A3CokFF;A2CnkFE;EACE,qBAAA;A3CqkFJ;;A2C1jFE;EACE,cAAA;EACA,YARI;EASJ,kBAAA;EACA,YATK;EAUL,gBAAA;A3C6jFJ;A2C3jFE;EACE,uBAAA;EACA,kCAAA;EACA,+BAAA;EACA,0BAAA;EACA,kBAAA;EACA,QAAA;A3C6jFJ;A2C5jFI;EACE,WAAA;EACA,cAAA;EACA,WAAA;A3C8jFN;A2C5jFI;EACE,oBAAA;EACA,8BAAA;EACA,2BAAA;EACA,sBAAA;EACA,YA7BG;EA8BH,WAAA;A3C8jFN;;A4CjsFA;EACE,WAAA;EACA,qBAAA;EACA,iBAAA;EACA,kBAAA;EACA,kBAAA;EACA,kBAAA;EACA,kBAAA;EAEA,sBAAA;EAUA,qBAAA;A5C0rFF;A4CnsFE;EAEE,kBAAA;A5CosFJ;A4CjsFE;EAEE,kBAAA;A5CksFJ;;A4C7rFA;EAEE,kBAAA;EACA,UAAA;A5C+rFF;;A4C5rFA;EC7BE,qBAAA;EACA,SAAA;EACA,UAAA;A7C6tFF;A6C3tFE;EACE,gBAAA;A7C6tFJ;A6C1tFE;EACE,SAAA;EACA,eAAA;A7C4tFJ;A6C1tFI;EACE,aAAA;A7C4tFN;;A4CxsFA;EACE,cAAA;EACA,uBAAA;EACA,kBAAA;EACA,UAAA;A5C2sFF;;A4CxsFA;EACE,mBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,oBAAA;EACA,UAAA;EACA,aAAA;A5C2sFF;A4CzsFE;EACE,yBAAA;A5C2sFJ;;A4CvsFA;EACE,SAAA;EACA,OAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;A5C0sFF;A4CxsFE;EACE,mBAAA;A5C0sFJ;A4CvsFE;EjC3DA,8BAAA;EACA,iBAAA;AXqwFF;;A4CtsFA;EACE,gBAAA;EACA,SAAA;EACA,SAAA;EACA,qBAAA;UAAA,aAAA;EACA,cAAA;EACA,eAAA;EACA,UAAA;EACA,kBAAA;EACA,MAAA;EACA,cAAA;A5CysFF;A4CvsFE;EAGE,cAAA;EACA,qBAAA;A5CusFJ;;A4CnsFA;EAEE,OAAA;A5CqsFF;;A4ClsFA;EAEE,QAAA;A5CosFF","file":"image-gallery.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","@use \"../settings\" as *;\n@use \"../functions/utilities\" as *;\n@use \"../mixins/utilities/margin\" as *;\n\n%usa-list {\n @include u-margin-y(1em);\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n padding-left: 3ch;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ul,\n ol {\n margin-top: 0.25em;\n }\n}\n\n%usa-list-item {\n margin-bottom: 0.25em;\n max-width: measure($theme-text-measure);\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Adds margin either l/r(x) or t/b(y)\n\n@mixin margin-n($side, $value...) {\n $value: unpack($value);\n @if $side == all {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin: get-uswds-value(margin, $value...) #{$important};\n } @else if $side == x {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-left: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n margin-right: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n } @else if $side == y {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-bottom: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n margin-top: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == t {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-top: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == r {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-right: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n } @else if $side == b {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-bottom: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == l {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-left: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n }\n}\n\n@mixin u-margin($value...) {\n @include margin-n(all, $value...);\n}\n\n@mixin u-margin-x($value...) {\n @include margin-n(x, $value...);\n}\n\n@mixin u-margin-y($value...) {\n @include margin-n(y, $value...);\n}\n\n@mixin u-margin-top($value...) {\n @include margin-n(t, $value...);\n}\n\n@mixin u-margin-right($value...) {\n @include margin-n(r, $value...);\n}\n\n@mixin u-margin-bottom($value...) {\n @include margin-n(b, $value...);\n}\n\n@mixin u-margin-left($value...) {\n @include margin-n(l, $value...);\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\nol, ul {\n margin-bottom: 1em;\n margin-top: 1em;\n line-height: 1.5;\n padding-left: 3ch;\n}\nol:last-child, ul:last-child {\n margin-bottom: 0;\n}\nol ul, ul ul,\nol ol,\nul ol {\n margin-top: 0.25em;\n}\n\nli {\n margin-bottom: 0.25em;\n max-width: 68ex;\n}\nli:last-child {\n margin-bottom: 0;\n}\n\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n* {\n transition-duration: 200ms;\n transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform;\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important;\n text-shadow: none !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n[id] {\n scroll-margin-top: 1em;\n}\n\nhtml {\n font-feature-settings: \"kern\" 1;\n font-kerning: normal;\n font-size: 100%;\n min-height: 100%;\n}\n\nbody {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.5;\n background-color: #fff;\n color: #1b1b1b;\n margin: 0;\n padding: 0;\n word-wrap: break-word;\n}\nbody.has-open-mobile-menu {\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n}\n\n@media print {\n nav {\n display: none;\n }\n}\n\nsummary {\n display: list-item;\n}\n\niframe {\n border: 0;\n max-width: 100%;\n}\n@media print {\n iframe {\n display: none;\n }\n}\n\nh6,\n.h6, h5,\n.h5, h4,\n.h4, h3,\n.h3,\n.image-gallery__title, h2,\n.h2, h1 {\n margin-bottom: 0;\n margin-top: 0;\n clear: none;\n margin-bottom: 1rem;\n clear: none;\n hyphens: none;\n text-rendering: optimizeLegibility;\n}\n* + h6,\n* + .h6, * + h5,\n* + .h5, * + h4,\n* + .h4, * + h3,\n* + .h3,\n* + .image-gallery__title, * + h2,\n* + .h2, * + h1 {\n margin-top: 1em;\n}\n@media print {\n h6,\n.h6, h5,\n.h5, h4,\n.h4, h3,\n.h3,\n.image-gallery__title, h2,\n.h2, h1 {\n orphans: 3;\n page-break-after: avoid;\n widows: 3;\n }\n h6::after,\n.h6::after, h5::after,\n.h5::after, h4::after,\n.h4::after, h3::after,\n.h3::after,\n.image-gallery__title::after, h2::after,\n.h2::after, h1::after {\n display: inline-block;\n }\n}\n\nh1 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 2.44rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h1 {\n font-size: 1.95rem;\n }\n}\n\nh2,\n.h2 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.95rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h2,\n.h2 {\n font-size: 1.34rem;\n }\n}\n\nh3,\n.h3,\n.image-gallery__title {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.34rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h3,\n.h3,\n.image-gallery__title {\n font-size: 1.1rem;\n }\n}\n\nh4,\n.h4 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 0.98rem;\n font-weight: 700;\n line-height: 1.2;\n}\n\nh5,\n.h5 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 0.91rem;\n font-weight: 700;\n line-height: 1.2;\n}\n\nh6,\n.h6 {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 0.87rem;\n font-weight: normal;\n letter-spacing: 0.025em;\n line-height: 1.1;\n text-transform: uppercase;\n}\n\np {\n line-height: 1.5;\n margin-bottom: 1rem;\n margin-top: 0;\n}\n@media print {\n p {\n orphans: 3;\n widows: 3;\n }\n}\np:empty {\n margin: 0 !important;\n}\n\na {\n background-color: transparent;\n color: #005ea2;\n -webkit-text-decoration-skip: objects;\n}\na:visited {\n color: #54278f;\n}\na:hover, a:focus {\n color: #1a4480;\n}\na:active {\n color: #162e51;\n}\n@media print {\n a, a:visited {\n text-decoration: none;\n }\n a[href]::after {\n content: \" <\" attr(href) \">\";\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 10pt;\n font-weight: normal;\n text-transform: lowercase;\n }\n a[href^=\"/\"]::after {\n content: \" \";\n }\n a[href^=\"javascript:\"]::after, a[href^=\"mailto:\"]::after, a[href^=\"tel:\"]::after, a[href^=\"#\"]::after, a[href*=\"?\"]::after {\n content: \"\";\n }\n}\n\nabbr[title] {\n border-bottom: 1px dotted;\n text-decoration: none;\n}\n@media (min-width: max-width 40rem) {\n abbr[title] {\n border-bottom: 0;\n }\n abbr[title]::after {\n content: \" (\" attr(title) \")\";\n }\n}\nabbr:hover {\n cursor: help;\n}\n@media print {\n abbr[title] {\n border-bottom: 0;\n }\n abbr[title]::after {\n content: \" (\" attr(title) \")\";\n }\n}\n\ncite {\n color: #565c65;\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 0.93rem;\n font-style: normal;\n font-weight: normal;\n letter-spacing: 0.025em;\n line-height: 1.6;\n}\n\ndfn {\n font-style: normal;\n}\n\nins {\n text-decoration: none;\n}\n\nmark {\n background: #ff0;\n color: #000;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\nvar {\n font-style: normal;\n}\n\nblockquote {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.1rem;\n font-weight: normal;\n line-height: 1.7;\n background-color: #fff;\n border-left: 0.5rem solid #00bde3;\n clear: both;\n margin: 0 0 1.5rem;\n padding: 1.25rem 0 1.25rem 1.25rem;\n}\nblockquote > :last-child {\n margin-bottom: 0;\n}\n* + blockquote {\n margin-top: 1.5rem;\n}\n\nblockquote cite {\n display: block;\n margin: 1rem 0;\n text-align: left;\n}\n\nblockquote p {\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\nblockquote cite em {\n border-left: 1px solid #71767a;\n font-weight: normal;\n margin-left: 0.25rem;\n padding-left: 0.5rem;\n}\n@media print {\n blockquote {\n page-break-inside: avoid;\n }\n}\n\npre {\n margin: 0 0 1rem;\n overflow: auto;\n}\n* + pre {\n margin-top: 1rem;\n}\n@media print {\n pre {\n page-break-inside: avoid;\n }\n}\n\nhr {\n border-top: solid #a9aeb1;\n border-width: 1px 0 0;\n box-sizing: content-box;\n height: 0;\n margin: 0 0 1.5rem;\n overflow: auto;\n}\n* + hr {\n margin-top: 1.5rem;\n}\n\naddress {\n font-style: normal;\n}\n\nul {\n list-style-type: disc;\n margin-top: 0;\n}\n[dir=rtl] ul {\n padding-left: 0;\n padding-right: 3ch;\n}\nul:last-child {\n margin-bottom: revert;\n}\nul ol,\nul ul {\n margin-top: 0.5rem;\n}\nul ul {\n list-style-type: circle;\n}\nul ul ul {\n list-style-type: square;\n}\n\nol {\n margin-top: 0;\n}\n[dir=rtl] ol {\n padding-left: 0;\n padding-right: 3ch;\n}\nol:last-child {\n margin-bottom: revert;\n}\nol ol,\nol ul {\n margin-top: 0.5rem;\n}\nol ol {\n list-style-type: lower-alpha;\n}\nol ol ol {\n list-style-type: lower-roman;\n}\n\nli {\n max-width: unset;\n}\n@media print {\n li {\n page-break-inside: avoid;\n }\n}\n\ndd {\n margin: 0 0 1rem 3ch;\n}\n[dir=rtl] dd {\n margin-left: 0;\n margin-right: 3ch;\n}\n\ndl {\n margin: 0 0 1rem;\n}\n\ntable {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.5;\n border-collapse: collapse;\n border-spacing: 0;\n color: #1b1b1b;\n margin: 1.25rem 0;\n text-align: left;\n /* stylelint-disable selector-class-pattern */\n /* stylelint-enable selector-class-pattern */\n}\ntable thead th {\n background-clip: padding-box;\n color: #1b1b1b;\n font-weight: 700;\n line-height: 1.3;\n}\ntable thead th,\ntable thead td {\n background-color: #dfe1e2;\n color: #1b1b1b;\n}\ntable tbody th {\n text-align: left;\n}\ntable th,\ntable td {\n background-color: white;\n border: 1px solid #1b1b1b;\n font-weight: normal;\n padding: 0.5rem 1rem;\n}\ntable caption {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1rem;\n font-weight: 700;\n margin-bottom: 0.75rem;\n text-align: left;\n}\ntable th[data-sortable] {\n padding-right: 2.5rem;\n position: relative;\n}\ntable th[data-sortable]::after {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-bottom-width: 1px;\n bottom: 0;\n content: \"\";\n height: 0;\n left: 0;\n position: absolute;\n width: 100%;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button, table th[data-sortable][aria-sort=none] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:visited, table th[data-sortable][aria-sort=none] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g.unsorted {\n fill: #1b1b1b;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover .usa-icon > g.unsorted {\n fill: black;\n}\ntable th[data-sortable][aria-sort=descending], table th[data-sortable][aria-sort=ascending] {\n background-color: #97d4ea;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g.descending {\n fill: #1b1b1b;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g.ascending {\n fill: #1b1b1b;\n}\ntable thead th[aria-sort] {\n background-color: #97d4ea;\n color: #1b1b1b;\n}\ntable td[data-sort-active],\ntable th[data-sort-active] {\n background-color: #e1f3f8;\n color: #1b1b1b;\n}\n\n@media print {\n thead {\n display: table-header-group;\n }\n}\n\ntbody th {\n background-color: #f0f0f0;\n font-weight: 700;\n}\n\n@media print {\n tr {\n page-break-inside: avoid;\n }\n}\n\nbutton {\n overflow: visible;\n}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\ninput {\n line-height: normal;\n}\n\nlegend {\n border: 0;\n box-sizing: border-box;\n color: inherit;\n display: table;\n margin: 0;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\noptgroup {\n font-weight: 700;\n}\n\ntextarea {\n overflow: auto;\n}\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\ncanvas {\n display: inline-block;\n}\n\nfigure {\n margin: 0;\n}\n\nimg {\n border: 0;\n font-style: italic;\n height: auto;\n max-width: 100%;\n vertical-align: middle;\n}\n@media print {\n img {\n max-width: 100% !important;\n page-break-inside: avoid;\n }\n}\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n.tns-outer {\n padding: 0 !important;\n}\n.tns-outer [hidden] {\n display: none !important;\n}\n.tns-outer [aria-controls], .tns-outer [data-action] {\n cursor: pointer;\n}\n\n.tns-slider {\n -webkit-transition: all 0s;\n -moz-transition: all 0s;\n transition: all 0s;\n}\n.tns-slider > .tns-item {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.tns-horizontal.tns-subpixel {\n white-space: nowrap;\n}\n.tns-horizontal.tns-subpixel > .tns-item {\n display: inline-block;\n vertical-align: top;\n white-space: normal;\n}\n.tns-horizontal.tns-no-subpixel:after {\n content: \"\";\n display: table;\n clear: both;\n}\n.tns-horizontal.tns-no-subpixel > .tns-item {\n float: left;\n}\n.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item {\n margin-right: -100%;\n}\n\n.tns-no-calc {\n position: relative;\n left: 0;\n}\n\n.tns-gallery {\n position: relative;\n left: 0;\n min-height: 1px;\n}\n.tns-gallery > .tns-item {\n position: absolute;\n left: -100%;\n -webkit-transition: transform 0s, opacity 0s;\n -moz-transition: transform 0s, opacity 0s;\n transition: transform 0s, opacity 0s;\n}\n.tns-gallery > .tns-slide-active {\n position: relative;\n left: auto !important;\n}\n.tns-gallery > .tns-moving {\n -webkit-transition: all 0.25s;\n -moz-transition: all 0.25s;\n transition: all 0.25s;\n}\n\n.tns-autowidth {\n display: inline-block;\n}\n\n.tns-lazy-img {\n -webkit-transition: opacity 0.6s;\n -moz-transition: opacity 0.6s;\n transition: opacity 0.6s;\n opacity: 0.6;\n}\n.tns-lazy-img.tns-complete {\n opacity: 1;\n}\n\n.tns-ah {\n -webkit-transition: height 0s;\n -moz-transition: height 0s;\n transition: height 0s;\n}\n\n.tns-ovh {\n overflow: hidden;\n}\n\n.tns-visually-hidden {\n position: absolute;\n left: -10000em;\n}\n\n.tns-transparent {\n opacity: 0;\n visibility: hidden;\n}\n\n.tns-fadeIn {\n opacity: 1;\n filter: alpha(opacity=100);\n z-index: 0;\n}\n\n.tns-normal, .tns-fadeOut {\n opacity: 0;\n filter: alpha(opacity=0);\n z-index: -1;\n}\n\n.tns-vpfix {\n white-space: nowrap;\n}\n.tns-vpfix > div, .tns-vpfix > li {\n display: inline-block;\n}\n\n.tns-t-subp2 {\n margin: 0 auto;\n width: 310px;\n position: relative;\n height: 10px;\n overflow: hidden;\n}\n.tns-t-ct {\n width: 2333.3333333333%;\n width: -webkit-calc(100% * 70 / 3);\n width: -moz-calc(100% * 70 / 3);\n width: calc(100% * 70 / 3);\n position: absolute;\n right: 0;\n}\n.tns-t-ct:after {\n content: \"\";\n display: table;\n clear: both;\n}\n.tns-t-ct > div {\n width: 1.4285714286%;\n width: -webkit-calc(100% / 70);\n width: -moz-calc(100% / 70);\n width: calc(100% / 70);\n height: 10px;\n float: left;\n}\n\n.image-gallery {\n clear: both;\n margin-bottom: 1.5rem;\n margin-left: auto;\n margin-right: auto;\n max-width: 45.5rem;\n padding: 0 2.75rem;\n position: relative;\n /* stylelint-disable */\n /* stylelint-enable */\n}\n.image-gallery.gallery_small, .image-gallery.gallery_small_tall {\n max-width: 25.5rem;\n}\n.image-gallery.gallery_large, .image-gallery.gallery_large_tall {\n max-width: 65.5rem;\n}\n\n.image-gallery__title {\n position: relative;\n z-index: 1;\n}\n\n.image-gallery__list {\n list-style-type: none;\n margin: 0;\n padding: 0;\n}\n.image-gallery__list:last-child {\n margin-bottom: 0;\n}\n.image-gallery__list li {\n margin: 0;\n padding-left: 0;\n}\n.image-gallery__list li::before {\n display: none;\n}\n\n.image-gallery__nav {\n line-height: 0;\n padding-bottom: 0.25rem;\n position: relative;\n z-index: 1;\n}\n\n.image-gallery__nav-button {\n background: #aacdec;\n border: 0;\n border-radius: 50%;\n height: 0.5rem;\n margin-right: 0.5rem;\n padding: 0;\n width: 0.5rem;\n}\n.image-gallery__nav-button.tns-nav-active {\n background-color: #4f97d1;\n}\n\n.image-gallery__controls {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n.image-gallery__controls:focus {\n outline-offset: 2px;\n}\n.image-gallery__controls:focus-within {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n\n.image-gallery__next, .image-gallery__prev {\n background: #fff;\n border: 0;\n bottom: 0;\n box-shadow: 0;\n color: #005ea2;\n font-size: 2rem;\n padding: 0;\n position: absolute;\n top: 0;\n width: 2.75rem;\n}\n.image-gallery__next:hover, .image-gallery__prev:hover, .image-gallery__next:focus, .image-gallery__prev:focus, .image-gallery__next:active, .image-gallery__prev:active {\n color: #1a4480;\n outline: 0 !important;\n}\n\n.image-gallery__prev {\n left: 0;\n}\n\n.image-gallery__next {\n right: 0;\n}","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Universal styles.\n\n@use '../../../00-config' as *;\n\n* {\n transition-duration: gesso-duration(short);\n transition-property: background-color, border-color, box-shadow, color,\n opacity, text-shadow, transform;\n transition-timing-function: gesso-easing(ease-in);\n}\n\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important;\n text-shadow: none !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n\n[id] {\n scroll-margin-top: 1em;\n}\n","// @file\n// HTML styles.\n\n@use 'sass:math';\n@use '../../../00-config' as *;\n\nhtml {\n @include add-kerning();\n font-size: 100% * math.div(gesso-base-font-size(), 16px);\n min-height: 100%;\n}\n","@mixin add-kerning {\n font-feature-settings: \"kern\" 1;\n font-kerning: normal;\n}\n","// @file\n// Body styles.\n\n@use '../../../00-config' as *;\n\nbody {\n @include typeset();\n background-color: gesso-color(background, site);\n color: gesso-color(text, primary);\n margin: 0;\n padding: 0;\n word-wrap: break-word;\n\n // stylelint-disable selector-no-qualifying-type\n &.has-open-mobile-menu {\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n }\n // stylelint-enable\n\n // Tweak styling in WYSIWYG editor.\n @if $wysiwyg {\n padding: 0 rem(gesso-site-margins(desktop));\n }\n}\n","// @file\n// Nav element styles.\n\nnav {\n @media print {\n display: none;\n }\n}\n","// @file\n// Details element styles.\n\n// details {}\n\nsummary {\n display: list-item;\n}\n","// @file\n// Iframe element styles.\n\niframe {\n border: 0;\n max-width: 100%;\n\n @media print {\n display: none;\n }\n}\n","// @file\n// Heading styles.\n\n@use '../../../00-config' as *;\n\n%hN {\n @include typeset-heading();\n clear: none;\n hyphens: none;\n text-rendering: optimizeLegibility;\n\n @media print {\n orphans: 3;\n page-break-after: avoid;\n widows: 3;\n\n &::after {\n display: inline-block;\n }\n }\n}\n\nh1,\n%h1 {\n @extend %hN;\n @include display-text-style(h1);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, xl);\n }\n}\n\nh2,\n.h2,\n%h2 {\n @extend %hN;\n @include display-text-style(h2);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, lg);\n }\n}\n\nh3,\n.h3,\n%h3 {\n @extend %hN;\n @include display-text-style(h3);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, md);\n }\n}\n\nh4,\n.h4,\n%h4 {\n @extend %hN;\n @include display-text-style(h4);\n}\n\nh5,\n.h5,\n%h5 {\n @extend %hN;\n @include display-text-style(h5);\n}\n\nh6,\n.h6,\n%h6 {\n @extend %hN;\n @include display-text-style(h6);\n}\n","// @file\n// Overrides for USWDS typography mixins\n\n@use '../../00-functions' as *;\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: none;\n margin-bottom: rem(gesso-spacing(2));\n\n * + & {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: rem(gesso-spacing(2));\n margin-top: 0;\n}\n","// @file\n// Display text styles\n\n@use '../00-functions' as *;\n\n@mixin display-text-style($keys...) {\n $display: gesso-get-map(typography, display, $keys...);\n\n @each $property, $value in $display {\n @if ($property == 'font-size') {\n // Check for px if not output value.\n #{$property}: #{rem(convert($value))};\n } @else {\n #{$property}: #{$value};\n }\n }\n}\n","// Mixins: Breakpoint\n// A 16px base value is passed to em() functions within breakpoint mixins due\n// to browsers not using the Gesso base font size for media query calculations.\n\n@use 'sass:string';\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n\n// Create a min-width media query.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint-min($breakpoint) {\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (min-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Assume min-width if shorthand breakpoint mixin is used.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint($breakpoint) {\n @include breakpoint-min($breakpoint) {\n @content;\n }\n}\n\n// Create a max-width media query.\n// @param {Number} $breakpoint - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint value.\n@mixin breakpoint-max($breakpoint, $subtract_1_from_max: false) {\n @if $subtract_1_from_max {\n $breakpoint: px($breakpoint) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (max-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Create a media query with both min-width and max-width.\n// @param {Number} $breakpoint-min - width value.\n// @param {Number} $breakpoint-max - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint-max value.\n@mixin breakpoint-min-max(\n $breakpoint-min,\n $breakpoint-max,\n $subtract_1_from_max: false\n) {\n @if $subtract_1_from_max {\n $breakpoint-max: px($breakpoint-max) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint-min: em($breakpoint-min, 16px);\n $breakpoint-max: em($breakpoint-max, 16px);\n }\n @media (min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max}) {\n @content;\n }\n}\n","// @file\n// Paragraph styles.\n\n@use '../../../00-config' as *;\n\np {\n @include typeset-p();\n\n @media print {\n orphans: 3;\n widows: 3;\n }\n\n // Hide empty paragraphs except in WYSIWYG editor.\n @if not $wysiwyg {\n &:empty {\n margin: 0 !important;\n }\n }\n}\n","// @file\n// Inline element styles.\n\n@use '../../../00-config' as *;\n\na {\n background-color: transparent;\n color: gesso-color(text, link);\n -webkit-text-decoration-skip: objects;\n\n &:visited {\n color: gesso-color(text, link-visited);\n }\n\n &:hover,\n &:focus {\n color: gesso-color(text, link-hover);\n }\n\n &:active {\n color: gesso-color(text, link-active);\n }\n\n @media print {\n &,\n &:visited {\n text-decoration: none;\n }\n\n &[href]::after {\n content: ' <' attr(href) '>';\n font-family: font-family(body);\n font-size: 10pt;\n font-weight: normal;\n text-transform: lowercase;\n }\n\n &[href^='/']::after {\n content: ' ';\n }\n\n &[href^='javascript:']::after,\n &[href^='mailto:']::after,\n &[href^='tel:']::after,\n &[href^='#']::after,\n &[href*='?']::after {\n content: '';\n }\n }\n}\n\nabbr {\n &[title] {\n border-bottom: 1px dotted;\n text-decoration: none;\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n border-bottom: 0;\n\n &::after {\n content: ' (' attr(title) ')';\n }\n }\n }\n\n &:hover {\n cursor: help;\n }\n\n @media print {\n &[title] {\n border-bottom: 0;\n\n &::after {\n content: ' (' attr(title) ')';\n }\n }\n }\n}\n\n// b {}\n\ncite {\n @include display-text-style(cite);\n}\n\n// code {}\n\n// del {}\n\ndfn {\n font-style: normal;\n}\n\n// em {}\n\n// i {}\n\nins {\n text-decoration: none;\n}\n\n// kbd {}\n\nmark {\n background: #ff0;\n color: #000;\n}\n\n// q {}\n\n// s {}\n\n// samp {}\n\nsmall {\n font-size: 80%;\n}\n\n// strong {}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n// time {}\n\n// u {}\n\nvar {\n font-style: normal;\n}\n","// @file\n// Blockquote styles.\n\n@use '../../../00-config' as *;\n\n$blockquote-cite-divider-color: gesso-color(ui, generic, border);\n\n%pull-quote {\n @include display-text-style(blockquote);\n background-color: gesso-grayscale(white);\n border-left: rem(units(1)) solid gesso-brand(aqua, base);\n clear: both;\n margin: 0 0 rem(gesso-spacing(3));\n padding: rem(units($theme-alert-padding-x)) 0\n rem(units($theme-alert-padding-x)) rem(units($theme-alert-padding-x));\n\n > :last-child {\n margin-bottom: 0;\n }\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(3));\n }\n}\n\n%pull-quote__cite {\n display: block;\n margin: rem(gesso-spacing(2)) 0;\n text-align: left;\n}\n\nblockquote {\n @extend %pull-quote;\n\n p {\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n\n cite {\n @extend %pull-quote__cite;\n\n em {\n border-left: 1px solid $blockquote-cite-divider-color;\n font-weight: font-weight(normal);\n margin-left: rem(gesso-spacing('05'));\n padding-left: rem(gesso-spacing(1));\n }\n }\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Preformatted text styles.\n\n@use '../../../00-config' as *;\n\npre {\n margin: 0 0 rem(gesso-spacing(2));\n overflow: auto;\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(2));\n }\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Horizontal rule styles.\n\n@use '../../../00-config' as *;\n\nhr {\n border-top: solid gesso-grayscale(gray-3);\n border-width: 1px 0 0;\n box-sizing: content-box;\n height: 0;\n margin: 0 0 rem(gesso-spacing(3));\n overflow: auto;\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(3));\n }\n}\n","// @file\n// Address element styles.\n\naddress {\n font-style: normal;\n}\n","// @file\n// Unordered list styles.\n\n@use '../../../00-config' as *;\n\nul {\n @extend %usa-list;\n list-style-type: disc;\n margin-top: 0;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n padding-left: 0;\n padding-right: 3ch;\n }\n }\n\n &:last-child {\n margin-bottom: revert;\n }\n\n ol,\n ul {\n margin-top: rem(gesso-spacing(1));\n }\n\n ul {\n list-style-type: circle;\n\n ul {\n list-style-type: square;\n }\n }\n}\n","// @file\n// Ordered list styles.\n\n@use '../../../00-config' as *;\n\nol {\n @extend %usa-list;\n margin-top: 0;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n padding-left: 0;\n padding-right: 3ch;\n }\n }\n\n &:last-child {\n margin-bottom: revert;\n }\n\n ol,\n ul {\n margin-top: rem(gesso-spacing(1));\n }\n\n ol {\n list-style-type: lower-alpha;\n\n ol {\n list-style-type: lower-roman;\n }\n }\n}\n","// @file\n// List item styles.\n\n@use '../../../00-config' as *;\n\nli {\n @extend %usa-list-item;\n max-width: unset;\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Definition list styles.\n\n@use '../../../00-config' as *;\n\ndd {\n margin: 0 0 rem(gesso-spacing(2)) 3ch;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n margin-left: 0;\n margin-right: 3ch;\n }\n }\n}\n\ndl {\n margin: 0 0 rem(gesso-spacing(2));\n}\n\n// dt {}\n","// @file\n// Table styles.\n\n@use '../../../00-config' as *;\n\ntable {\n @include usa-table();\n}\n\nthead {\n @media print {\n display: table-header-group;\n }\n}\n\ntbody {\n th {\n background-color: color('base-lightest');\n font-weight: $theme-font-weight-bold;\n }\n}\n\ntr {\n @media print {\n page-break-inside: avoid;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"button-unstyled\" as *;\n@use \"../helpers\" as *;\n@use \"../utilities\" as *;\n@use \"../typography/typeset\" as *;\n\n$table-text-color: get-color-token-from-bg(\n $bg-color: $theme-body-background-color,\n $preferred-text-token: $theme-table-text-color,\n $context: \"Table text\",\n);\n\n$table-header-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-header-background-color,\n $preferred-text-token: $theme-table-header-text-color,\n $context: \"Table header text\",\n )\n);\n\n$table-stripe-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-stripe-background-color,\n $preferred-text-token: $theme-table-stripe-text-color,\n $context: \"Table stripe text\",\n )\n);\n\n$table-sorted-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-background-color,\n $context: \"Table sorted text\",\n )\n);\n\n$table-sorted-header-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-header-background-color,\n $preferred-text-token: $theme-table-header-text-color,\n $context: \"Table sorted header text\",\n )\n);\n\n$table-sorted-stripe-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-stripe-background-color,\n $preferred-text-token: $theme-table-stripe-text-color,\n $context: \"Table sorted stripe text\",\n )\n);\n\n$table-sorted-icon-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-header-background-color,\n $preferred-text-token: $theme-table-sorted-icon-color,\n $context: \"Table sorted icon\",\n )\n);\n\n$table-unsorted-icon-color: get-color-token-from-bg(\n $bg-color: $theme-table-header-background-color,\n $preferred-text-token: $theme-table-unsorted-icon-color,\n $context: \"Table unsorted icon\",\n);\n\n\n// Shared table styles\n@mixin table-header-unsorted-styles {\n padding-right: units(5);\n position: relative;\n &::after {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-bottom-width: units(1px);\n bottom: 0;\n content: \"\";\n height: 0;\n left: 0;\n position: absolute;\n width: 100%;\n }\n}\n\n@mixin table-button-default-styles {\n @include button-unstyled;\n @include u-square(4);\n background-position: center center;\n background-size: units(3);\n color: color($theme-table-unsorted-icon-color);\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n // vertically center button within table header\n top: 50%;\n transform: translate(0, -50%);\n .usa-icon {\n @include u-square(3);\n vertical-align: middle;\n & > g {\n fill: transparent;\n }\n }\n}\n\n// The SVG in the sortable column button contains three icon shapes.\n// This CSS controls which of the shapes is 'filled' when active.\n\n@mixin table-button-unsorted-styles {\n @include table-button-default-styles;\n .usa-icon > g.unsorted {\n fill: color($table-unsorted-icon-color);\n }\n &:hover .usa-icon > g.unsorted {\n fill: color(\n next-token($table-unsorted-icon-color, \"darker\")\n )\n }\n}\n\n@mixin table-button-sorted-ascending-styles {\n @include table-button-default-styles;\n .usa-icon > g.ascending {\n fill: $table-sorted-icon-color;\n }\n}\n\n@mixin table-button-sorted-descending-styles {\n @include table-button-default-styles;\n .usa-icon > g.descending {\n fill: $table-sorted-icon-color;\n }\n}\n\n@mixin table-stacked-styles {\n thead {\n display: none;\n }\n\n th,\n td {\n border-bottom-width: 0;\n display: block;\n width: 100%;\n }\n\n tr {\n border-bottom: units(0.5) solid color($theme-table-border-color);\n border-top-width: 0;\n display: block;\n width: 100%;\n th:first-child,\n td:first-child {\n border-top-width: 0;\n }\n &:nth-child(odd) {\n td,\n th {\n background-color: inherit;\n }\n }\n\n &:first-child {\n th:first-child,\n td:first-child {\n border-top: units(0.5) solid color($theme-table-border-color);\n }\n }\n }\n\n th[data-label],\n td[data-label] {\n padding-bottom: units(1.5);\n\n &:before {\n content: attr(data-label);\n display: block;\n font-weight: fw(\"bold\");\n margin: units(-1) units(-2) units(0);\n padding: units(1.5) units(2) units(0.5);\n }\n }\n}\n\n@mixin table-stacked-header-styles {\n tr {\n td:first-child,\n th:first-child {\n @include typeset(\n $theme-body-font-family,\n $theme-h4-font-size,\n $theme-heading-line-height\n );\n background-color: color($theme-table-header-background-color);\n color: $table-header-text-color;\n font-weight: fw(\"bold\");\n padding: units(1.5) units(2);\n &:before {\n display: none;\n }\n }\n }\n}\n\n@mixin usa-table {\n @include border-box-sizing;\n @include typeset;\n border-collapse: collapse;\n border-spacing: 0;\n color: color($table-text-color);\n margin: units(2.5) 0;\n text-align: left;\n\n thead {\n th {\n background-clip: padding-box;\n color: $table-header-text-color;\n font-weight: fw(\"bold\");\n line-height: line-height(\n $theme-body-font-family,\n $theme-input-line-height\n );\n }\n\n th,\n td {\n background-color: color($theme-table-header-background-color);\n color: $table-header-text-color;\n }\n }\n tbody {\n th {\n text-align: left;\n }\n }\n th,\n td {\n background-color: color($theme-body-background-color);\n border: 1px solid color($theme-table-border-color);\n font-weight: fw(\"normal\");\n padding: units(1) units(2);\n }\n\n caption {\n @include u-font(\"body\", \"xs\");\n font-weight: fw(\"bold\");\n margin-bottom: units(1.5);\n text-align: left;\n }\n\n /* stylelint-disable selector-class-pattern */\n th[data-sortable] {\n @include table-header-unsorted-styles;\n\n &:not([aria-sort]),\n &[aria-sort=\"none\"] {\n .usa-table__header__button {\n @include table-button-unsorted-styles;\n }\n }\n\n &[aria-sort=\"descending\"],\n &[aria-sort=\"ascending\"] {\n background-color: color($theme-table-sorted-header-background-color);\n }\n\n &[aria-sort=\"descending\"] {\n .usa-table__header__button {\n @include table-button-sorted-descending-styles;\n }\n }\n\n &[aria-sort=\"ascending\"] {\n .usa-table__header__button {\n @include table-button-sorted-ascending-styles;\n }\n }\n }\n /* stylelint-enable selector-class-pattern */\n\n thead {\n th[aria-sort] {\n background-color: color($theme-table-sorted-header-background-color);\n color: $table-sorted-header-text-color;\n }\n }\n\n td[data-sort-active],\n th[data-sort-active] {\n background-color: color($theme-table-sorted-background-color);\n color: $table-sorted-text-color;\n }\n}\n\n\n@mixin usa-table--borderless {\n thead {\n th {\n background-color: transparent;\n border-top: 0;\n color: color($table-text-color);\n\n &[aria-sort] {\n color: $table-sorted-header-text-color;\n }\n }\n /* stylelint-disable selector-class-pattern */\n th[data-sortable]:not([aria-sort]) {\n .usa-table__header__button .usa-icon > g.unsorted {\n fill: color($table-text-color);\n }\n\n .usa-table__header__button:hover .usa-icon > g.unsorted {\n fill: color(\n next-token($table-text-color, \"darker\")\n );\n }\n }\n /* stylelint-enable selector-class-pattern */\n }\n\n th,\n td {\n border-left: 0;\n border-right: 0;\n }\n}\n\n@mixin usa-table--compact {\n th,\n td {\n padding: units(0.5) units(1.5);\n }\n}\n\n@mixin usa-table--striped {\n tbody {\n tr:nth-child(odd) {\n td,\n th {\n background-color: color($theme-table-stripe-background-color);\n color: $table-stripe-text-color;\n &[data-sort-active] {\n background-color: color($theme-table-sorted-stripe-background-color);\n color: $table-sorted-stripe-text-color;\n }\n }\n }\n }\n}\n\n@mixin usa-table--stacked {\n @include table-stacked-styles;\n}\n\n@mixin usa-table--stacked-header {\n @include table-stacked-styles;\n @include table-stacked-header-styles;\n}\n\n@mixin usa-table-container--scrollable {\n margin: units(2.5) 0;\n overflow-y: hidden;\n\n .usa-table {\n margin: 0;\n }\n\n td {\n white-space: nowrap;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs height\n\n@mixin u-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n height: get-uswds-value(\"height\", $value...) #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs width\n\n@mixin u-width($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n width: get-uswds-value(\"width\", $value...) #{$important};\n}\n","// @file\n// Form element styles.\n\n@use '../../../00-config' as *;\n\n// Don’t style button elements, since they’re often styled as links for\n// accessible widgets. Use the .button class in components/button.\nbutton {\n overflow: visible;\n}\n\n// datalist {}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n// form {}\n\n// Don't style button, submit, or reset elements, since they're often styled as\n// links for accessible widgets. Use the .button class in\n// partials/components/button.\ninput {\n line-height: normal;\n}\n\n// input[type='button'] {}\n// input[type='checkbox'] {}\n// input[type='color'] {}\n// input[type='date'] {}\n// input[type='datetime'] {}\n// input[type='datetime-local'] {}\n// input[type='email'] {}\n// input[type='file'] {}\n// input[type='image'] {}\n// input[type='month'] {}\n// input[type='number'] {}\n// input[type='password'] {}\n// input[type='radio'] {}\n// input[type='range'] {}\n// input[type='reset'] {}\n// input[type='search'] {}\n// input[type='submit'] {}\n// input[type='tel'] {}\n// input[type='text'] {}\n// input[type='time'] {}\n// input[type='url'] {}\n// input[type='week'] {}\n\n// label {}\n\nlegend {\n border: 0;\n box-sizing: border-box;\n color: inherit;\n display: table;\n margin: 0;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\n// meter {}\n\noptgroup {\n font-weight: font-weight(bold);\n}\n\n// option {}\n\n// output {}\n\n// progress {}\n\n// select {}\n\ntextarea {\n overflow: auto;\n}\n","// @file\n// Audio element styles.\n\naudio {\n &:not([controls]) {\n display: none;\n height: 0;\n }\n}\n","// @file\n// Canvas element styles.\n\ncanvas {\n display: inline-block;\n}\n","// @file\n// Figure element styles.\n\nfigure {\n margin: 0;\n}\n\n// figcaption {}\n","// @file\n// IMG element styles.\n\nimg {\n border: 0;\n font-style: italic; // Makes alt text stand out from surrounding text.\n height: auto;\n max-width: 100%;\n vertical-align: middle;\n\n @media print {\n max-width: 100% !important;\n page-break-inside: avoid;\n }\n}\n","// @file\n// SVG element styles.\n\nsvg {\n &:not(:root) {\n overflow: hidden;\n }\n}\n","// Version: 2.9.4\n\n.tns-outer {\n padding: 0 !important; // remove padding: clientWidth = width + padding (0) = width\n [hidden] { display: none !important; }\n [aria-controls], [data-action] { cursor: pointer; }\n}\n.tns-slider {\n -webkit-transition: all 0s;\n -moz-transition: all 0s;\n transition: all 0s;\n > .tns-item {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n }\n}\n\n.tns-horizontal {\n &.tns-subpixel {\n white-space: nowrap;\n > .tns-item {\n display: inline-block;\n vertical-align: top;\n white-space: normal;\n }\n }\n &.tns-no-subpixel {\n &:after {\n content: '';\n display: table;\n clear: both;\n }\n > .tns-item {\n float: left;\n }\n }\n &.tns-carousel {\n &.tns-no-subpixel {\n > .tns-item {\n margin-right: -100%;\n }\n }\n }\n}\n.tns-no-calc {\n position: relative;\n left: 0;\n}\n.tns-gallery {\n position: relative;\n left: 0;\n min-height: 1px; // make sure slider container is visible\n // overflow: hidden;\n > .tns-item {\n position: absolute;\n left: -100%;\n -webkit-transition: transform 0s, opacity 0s;\n -moz-transition: transform 0s, opacity 0s;\n transition: transform 0s, opacity 0s;\n }\n > .tns-slide-active {\n position: relative;\n left: auto !important;\n }\n > .tns-moving {\n -webkit-transition: all 0.25s;\n -moz-transition: all 0.25s;\n transition: all 0.25s;\n }\n}\n.tns-autowidth { display: inline-block; }\n.tns-lazy-img {\n -webkit-transition: opacity 0.6s;\n -moz-transition: opacity 0.6s;\n transition: opacity 0.6s;\n opacity: 0.6;\n &.tns-complete { opacity: 1; }\n}\n.tns-ah {\n -webkit-transition: height 0s;\n -moz-transition: height 0s;\n transition: height 0s;\n}\n.tns-ovh { overflow: hidden; }\n.tns-visually-hidden { position: absolute; left: -10000em; }\n.tns-transparent { opacity: 0; visibility: hidden; }\n\n.tns-fadeIn {\n opacity: 1;\n filter: alpha(opacity=100);\n z-index: 0;\n}\n.tns-normal, .tns-fadeOut {\n opacity: 0;\n filter: alpha(opacity=0);\n z-index: -1;\n}\n\n\n// *** Fix a viewport issue in initialization\n.tns-vpfix {\n white-space: nowrap;\n > div, > li {\n display: inline-block;\n }\n}\n\n// *** Detecting browser capability ***\n$width: 310px;\n$height: 10px;\n$count: 70;\n$perpage: 3;\n\n.tns-t {\n &-subp2 {\n margin: 0 auto;\n width: $width;\n position: relative;\n height: $height;\n overflow: hidden;\n }\n &-ct {\n width: (100% * $count / $perpage);\n width: -webkit-calc(100% * #{$count} / #{$perpage});\n width: -moz-calc(100% * #{$count} / #{$perpage});\n width: calc(100% * #{$count} / #{$perpage});\n position: absolute;\n right: 0;\n &:after {\n content: '';\n display: table;\n clear: both;\n }\n > div {\n width: (100% / $count);\n width: -webkit-calc(100% / #{$count});\n width: -moz-calc(100% / #{$count});\n width: calc(100% / #{$count});\n height: $height;\n float: left;\n }\n }\n}\n","// @file\n// Styles for an Image Gallery.\n\n@use '../../00-config' as *;\n@use '../../02-base' as *;\n@use 'tiny-slider';\n\n$button-size: 44px;\n\n.image-gallery {\n clear: both;\n margin-bottom: rem(units(3));\n margin-left: auto;\n margin-right: auto;\n max-width: rem(640px + $button-size * 2);\n padding: 0 rem($button-size);\n position: relative;\n\n /* stylelint-disable */\n &.gallery_small,\n &.gallery_small_tall {\n max-width: rem(320px + $button-size * 2);\n }\n\n &.gallery_large,\n &.gallery_large_tall {\n max-width: rem(960px + $button-size * 2);\n }\n /* stylelint-enable */\n}\n\n.image-gallery__title {\n @extend %h3;\n position: relative;\n z-index: 1;\n}\n\n.image-gallery__list {\n @include list-clean();\n}\n\n.image-gallery__nav {\n line-height: 0;\n padding-bottom: rem(gesso-spacing('05'));\n position: relative;\n z-index: 1;\n}\n\n.image-gallery__nav-button {\n background: gesso-brand(blue, light-1);\n border: 0;\n border-radius: 50%;\n height: rem(gesso-spacing(1));\n margin-right: rem(gesso-spacing(1));\n padding: 0;\n width: rem(gesso-spacing(1));\n\n &.tns-nav-active {\n background-color: gesso-brand(blue, light);\n }\n}\n\n.image-gallery__controls {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n\n &:focus {\n outline-offset: 2px;\n }\n\n &:focus-within {\n @include focus-outline();\n }\n}\n\n%image-gallery__button {\n background: gesso-grayscale(white);\n border: 0;\n bottom: 0;\n box-shadow: 0;\n color: gesso-brand(blue, base);\n font-size: rem(gesso-spacing(4));\n padding: 0;\n position: absolute;\n top: 0;\n width: rem($button-size);\n\n &:hover,\n &:focus,\n &:active {\n color: gesso-brand(blue, dark);\n outline: 0 !important;\n }\n}\n\n.image-gallery__prev {\n @extend %image-gallery__button;\n left: 0;\n}\n\n.image-gallery__next {\n @extend %image-gallery__button;\n right: 0;\n}\n","// @file\n// Various mixins for list styles\n\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n@use 'mixins.breakpoint' as *;\n\n@mixin list-clean {\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n li {\n margin: 0;\n padding-left: 0;\n\n &::before {\n display: none;\n }\n }\n}\n\n@mixin list-inline {\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n\n li {\n margin: 0;\n padding-left: 0;\n }\n\n > li {\n display: inline;\n }\n}\n\n@mixin list-pipeline($pipeline-border-color: gesso-color(ui, generic, border)) {\n @include clearfix();\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n\n > li {\n border-right: 1px solid $pipeline-border-color; // LTR\n display: block;\n float: left; // LTR\n margin-right: 0.75em; // LTR\n padding-left: 0;\n padding-right: 0.75em; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n border-left: 1px solid $pipeline-border-color;\n border-right: 0;\n float: right;\n margin-left: 0.75em;\n margin-right: 0;\n padding-left: 0.75em;\n padding-right: 0;\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.is-active {\n font-weight: gesso-font-weight(bold);\n }\n\n &:last-child {\n border-right: 0; // LTR\n margin-right: 0; // LTR\n padding-right: 0; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n border-left: 0;\n margin-left: 0;\n padding-left: 0;\n }\n }\n }\n }\n}\n\n@mixin list-border(\n $list-border-padding: 0.25rem,\n $list-border-color: gesso-color(ui, generic, border)\n) {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n\n > li {\n border-bottom: 1px solid $list-border-color;\n margin-bottom: 0;\n padding: $list-border-padding;\n }\n}\n\n@mixin list-column(\n $list-column-count: 2,\n $list-column-gap: 2em,\n $list-item-padding: 0.25em\n) {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n\n li {\n padding-left: 0;\n }\n\n > li {\n break-inside: avoid-column;\n display: table; // break-inside alternative for Firefox\n margin-bottom: 0;\n padding-bottom: $list-item-padding; // use padding instead of margin for Safari bug with CSS columns\n }\n\n @include breakpoint(500px) {\n column-count: $list-column-count;\n column-gap: $list-column-gap;\n }\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/pager/pager.css b/services/drupal/web/themes/epa_theme/css/pager/pager.css new file mode 100644 index 0000000000..70ed6eb088 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/pager/pager.css @@ -0,0 +1,1911 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +.pager { + border-top: 1px solid #dfe1e2; + margin-top: 1.5rem; + padding-top: 1.5rem; +} + +.pager__items { + list-style-type: none; + margin: 0; + padding: 0; + clear: both; + text-align: center; +} +.pager__items:last-child { + margin-bottom: 0; +} +.pager__items li { + margin: 0; + padding-left: 0; +} +.pager__items li::before { + display: none; +} + +.pager__item { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + line-height: 1; + margin: 0; + padding: 0; + vertical-align: top; +} +.pager__item:not([class*=pager__item--]) { + display: none; +} +@media (min-width: 37.5em) { + .pager__item:not([class*=pager__item--]) { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + } +} + +.pager__link, .pager__item--current.pager__item, .pager__item--ellipsis { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: transparent; + color: #1b1b1b; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + min-height: 2.5rem; + min-width: 2.5rem; + padding: 0; +} + +.pager__item--ellipsis { + display: none; + padding-right: 0; +} +@media (min-width: 50em) { + .pager__item--ellipsis { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + } +} + +.pager__item--current.pager__item { + background-color: #005ea2; + color: #fff; + height: 2.5rem; +} + +.pager__link { + text-decoration: none; +} +.pager__link:visited { + color: #1b1b1b; +} +.pager__link:hover, .pager__link:focus { + background-color: #005ea2; + color: #fff; +} +.pager__link:active { + background-color: #1a4480; + color: #fff; +} +/*# sourceMappingURL=pager.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/pager/pager.css.map b/services/drupal/web/themes/epa_theme/css/pager/pager.css.map new file mode 100644 index 0000000000..560b7fded8 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/pager/pager.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","pager/pager.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","pager/pager.scss","../00-config/01-mixins/_mixins.list.scss","../00-config/01-mixins/_mixins.breakpoint.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AUlvDA;EACE,6BAAA;EACA,kBAAA;EACA,mBAAA;AVqvDF;;AUlvDA;ECnBE,qBAAA;EACA,SAAA;EACA,UAAA;EDmBA,WAAA;EACA,kBAAA;AVuvDF;AWzwDE;EACE,gBAAA;AX2wDJ;AWxwDE;EACE,SAAA;EACA,eAAA;AX0wDJ;AWxwDI;EACE,aAAA;AX0wDN;;AU9vDA;EACE,2BAAA;EAAA,2BAAA;EAAA,oBAAA;EACA,cAAA;EACA,SAAA;EACA,UAAA;EACA,mBAAA;AViwDF;AU/vDE;EACE,aAAA;AViwDJ;AY5xDE;EF0BA;IAII,2BAAA;IAAA,2BAAA;IAAA,oBAAA;EVkwDJ;AACF;;AU9vDA;EACE,yBAAA;MAAA,sBAAA;UAAA,mBAAA;EACA,6BAAA;EACA,cApCiB;EAqCjB,2BAAA;EAAA,2BAAA;EAAA,oBAAA;EACA,wBAAA;MAAA,qBAAA;UAAA,uBAAA;EACA,kBAAA;EACA,iBAAA;EACA,UAAA;AViwDF;;AU9vDA;EAEE,aAAA;EACA,gBAAA;AVgwDF;AYjzDE;EF8CF;IAMI,2BAAA;IAAA,2BAAA;IAAA,oBAAA;EViwDF;AACF;;AU9vDA;EAEE,yBAnEuB;EAoEvB,WAxDwB;EAyDxB,cAAA;AVgwDF;;AU7vDA;EAEE,qBAAA;AV+vDF;AU7vDE;EACE,cAlEe;AVi0DnB;AU5vDE;EAEE,yBAjF2B;EAkF3B,WAvEsB;AVo0D1B;AU1vDE;EACE,yBAjF4B;EAkF5B,WA5EsB;AVw0D1B","file":"pager.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.pager {\n border-top: 1px solid #dfe1e2;\n margin-top: 1.5rem;\n padding-top: 1.5rem;\n}\n\n.pager__items {\n list-style-type: none;\n margin: 0;\n padding: 0;\n clear: both;\n text-align: center;\n}\n.pager__items:last-child {\n margin-bottom: 0;\n}\n.pager__items li {\n margin: 0;\n padding-left: 0;\n}\n.pager__items li::before {\n display: none;\n}\n\n.pager__item {\n display: inline-flex;\n line-height: 1;\n margin: 0;\n padding: 0;\n vertical-align: top;\n}\n.pager__item:not([class*=pager__item--]) {\n display: none;\n}\n@media (min-width: 37.5em) {\n .pager__item:not([class*=pager__item--]) {\n display: inline-flex;\n }\n}\n\n.pager__link, .pager__item--current.pager__item, .pager__item--ellipsis {\n align-items: center;\n background-color: transparent;\n color: #1b1b1b;\n display: inline-flex;\n justify-content: center;\n min-height: 2.5rem;\n min-width: 2.5rem;\n padding: 0;\n}\n\n.pager__item--ellipsis {\n display: none;\n padding-right: 0;\n}\n@media (min-width: 50em) {\n .pager__item--ellipsis {\n display: inline-flex;\n }\n}\n\n.pager__item--current.pager__item {\n background-color: #005ea2;\n color: #fff;\n height: 2.5rem;\n}\n\n.pager__link {\n text-decoration: none;\n}\n.pager__link:visited {\n color: #1b1b1b;\n}\n.pager__link:hover, .pager__link:focus {\n background-color: #005ea2;\n color: #fff;\n}\n.pager__link:active {\n background-color: #1a4480;\n color: #fff;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for Pager.\n\n@use '../../00-config' as *;\n\n$pager-background-color: gesso-color(button, primary, background) !default;\n$pager-background-color-hover: gesso-color(\n button,\n primary,\n background\n) !default;\n$pager-background-color-active: gesso-color(\n button,\n primary,\n background-hover\n) !default;\n$pager-link-color: gesso-color(text, on-light) !default;\n$pager-link-color-active: gesso-color(button, primary, text) !default;\n$pager-ellipsis-bp: 800px !default;\n$pager-bp: 600px !default;\n\n.pager {\n border-top: 1px solid gesso-grayscale(gray-2);\n margin-top: rem(gesso-spacing(3));\n padding-top: rem(gesso-spacing(3));\n}\n\n.pager__items {\n @include list-clean();\n clear: both;\n text-align: center;\n}\n\n.pager__item {\n display: inline-flex;\n line-height: 1;\n margin: 0;\n padding: 0;\n vertical-align: top;\n\n &:not([class*='pager__item--']) {\n display: none;\n\n @include breakpoint($pager-bp) {\n display: inline-flex;\n }\n }\n}\n\n%pager__link {\n align-items: center;\n background-color: transparent;\n color: $pager-link-color;\n display: inline-flex;\n justify-content: center;\n min-height: rem(gesso-spacing(5));\n min-width: rem(gesso-spacing(5));\n padding: 0;\n}\n\n.pager__item--ellipsis {\n @extend %pager__link;\n display: none;\n padding-right: 0;\n\n @include breakpoint($pager-ellipsis-bp) {\n display: inline-flex;\n }\n}\n\n.pager__item--current.pager__item {\n @extend %pager__link;\n background-color: $pager-background-color;\n color: $pager-link-color-active;\n height: rem(gesso-spacing(5));\n}\n\n.pager__link {\n @extend %pager__link;\n text-decoration: none;\n\n &:visited {\n color: $pager-link-color;\n }\n\n &:hover,\n &:focus {\n background-color: $pager-background-color-hover;\n color: $pager-link-color-active;\n }\n\n &:active {\n background-color: $pager-background-color-active;\n color: $pager-link-color-active;\n }\n}\n","// @file\n// Various mixins for list styles\n\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n@use 'mixins.breakpoint' as *;\n\n@mixin list-clean {\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n li {\n margin: 0;\n padding-left: 0;\n\n &::before {\n display: none;\n }\n }\n}\n\n@mixin list-inline {\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n\n li {\n margin: 0;\n padding-left: 0;\n }\n\n > li {\n display: inline;\n }\n}\n\n@mixin list-pipeline($pipeline-border-color: gesso-color(ui, generic, border)) {\n @include clearfix();\n list-style-type: none;\n margin-left: 0;\n padding-left: 0;\n\n > li {\n border-right: 1px solid $pipeline-border-color; // LTR\n display: block;\n float: left; // LTR\n margin-right: 0.75em; // LTR\n padding-left: 0;\n padding-right: 0.75em; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n border-left: 1px solid $pipeline-border-color;\n border-right: 0;\n float: right;\n margin-left: 0.75em;\n margin-right: 0;\n padding-left: 0.75em;\n padding-right: 0;\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.is-active {\n font-weight: gesso-font-weight(bold);\n }\n\n &:last-child {\n border-right: 0; // LTR\n margin-right: 0; // LTR\n padding-right: 0; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n border-left: 0;\n margin-left: 0;\n padding-left: 0;\n }\n }\n }\n }\n}\n\n@mixin list-border(\n $list-border-padding: 0.25rem,\n $list-border-color: gesso-color(ui, generic, border)\n) {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n\n > li {\n border-bottom: 1px solid $list-border-color;\n margin-bottom: 0;\n padding: $list-border-padding;\n }\n}\n\n@mixin list-column(\n $list-column-count: 2,\n $list-column-gap: 2em,\n $list-item-padding: 0.25em\n) {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n\n li {\n padding-left: 0;\n }\n\n > li {\n break-inside: avoid-column;\n display: table; // break-inside alternative for Firefox\n margin-bottom: 0;\n padding-bottom: $list-item-padding; // use padding instead of margin for Safari bug with CSS columns\n }\n\n @include breakpoint(500px) {\n column-count: $list-column-count;\n column-gap: $list-column-gap;\n }\n}\n","// Mixins: Breakpoint\n// A 16px base value is passed to em() functions within breakpoint mixins due\n// to browsers not using the Gesso base font size for media query calculations.\n\n@use 'sass:string';\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n\n// Create a min-width media query.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint-min($breakpoint) {\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (min-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Assume min-width if shorthand breakpoint mixin is used.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint($breakpoint) {\n @include breakpoint-min($breakpoint) {\n @content;\n }\n}\n\n// Create a max-width media query.\n// @param {Number} $breakpoint - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint value.\n@mixin breakpoint-max($breakpoint, $subtract_1_from_max: false) {\n @if $subtract_1_from_max {\n $breakpoint: px($breakpoint) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (max-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Create a media query with both min-width and max-width.\n// @param {Number} $breakpoint-min - width value.\n// @param {Number} $breakpoint-max - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint-max value.\n@mixin breakpoint-min-max(\n $breakpoint-min,\n $breakpoint-max,\n $subtract_1_from_max: false\n) {\n @if $subtract_1_from_max {\n $breakpoint-max: px($breakpoint-max) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint-min: em($breakpoint-min, 16px);\n $breakpoint-max: em($breakpoint-max, 16px);\n }\n @media (min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max}) {\n @content;\n }\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/progress/progress.css b/services/drupal/web/themes/epa_theme/css/progress/progress.css new file mode 100644 index 0000000000..c75517f7d8 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/progress/progress.css @@ -0,0 +1,1868 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +.progress { + position: relative; +} + +.progress__track { + background-color: #71767a; + border: 1px solid #3d4551; + border-radius: 0.1875rem; + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); + height: 1rem; + margin: 0.25rem 0; + max-width: 100%; + min-width: 6em; + overflow: hidden; +} + +.progress__bar { + background-color: #00bde3; + border-radius: 0.1875rem; + height: 1rem; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-property: width; + transition-property: width; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + width: 3%; +} + +.progress__description, +.progress__percentage { + color: #1b1b1b; + font-size: 0.87rem; + overflow: hidden; +} + +.progress__description { + float: left; +} +[dir=rtl] .progress__description { + float: right; +} + +.progress__percentage { + float: right; +} +[dir=rtl] .progress__percentage { + float: left; +} +/*# sourceMappingURL=progress.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/progress/progress.css.map b/services/drupal/web/themes/epa_theme/css/progress/progress.css.map new file mode 100644 index 0000000000..8021f5fddf --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/progress/progress.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","progress/progress.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","progress/progress.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AU5vDA;EACE,kBAAA;AV+vDF;;AU5vDA;EACE,yBAX0B;EAY1B,yBAAA;EACA,wBAVuB;EAWvB,uDAAA;UAAA,+CAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,cAAA;EACA,gBAAA;AV+vDF;;AU5vDA;EACE,yBAtBmB;EAuBnB,wBArBuB;EAsBvB,YAAA;EACA,iCAAA;UAAA,yBAAA;EACA,kCAAA;EAAA,0BAAA;EACA,4CAAA;UAAA,oCAAA;EACA,SAAA;AV+vDF;;AU5vDA;;EAEE,cA9BoB;EA+BpB,kBAAA;EACA,gBAAA;AV+vDF;;AU5vDA;EACE,WAAA;AV+vDF;AU5vDI;EACE,YAAA;AV8vDN;;AUzvDA;EACE,YAAA;AV4vDF;AUzvDI;EACE,WAAA;AV2vDN","file":"progress.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.progress {\n position: relative;\n}\n\n.progress__track {\n background-color: #71767a;\n border: 1px solid #3d4551;\n border-radius: 0.1875rem;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);\n height: 1rem;\n margin: 0.25rem 0;\n max-width: 100%;\n min-width: 6em;\n overflow: hidden;\n}\n\n.progress__bar {\n background-color: #00bde3;\n border-radius: 0.1875rem;\n height: 1rem;\n transition-duration: 0.5s;\n transition-property: width;\n transition-timing-function: ease-out;\n width: 3%;\n}\n\n.progress__description,\n.progress__percentage {\n color: #1b1b1b;\n font-size: 0.87rem;\n overflow: hidden;\n}\n\n.progress__description {\n float: left;\n}\n[dir=rtl] .progress__description {\n float: right;\n}\n\n.progress__percentage {\n float: right;\n}\n[dir=rtl] .progress__percentage {\n float: left;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for progress bars.\n\n@use '../../00-config' as *;\n\n$progress-background-color: gesso-color(ui, generic, background) !default;\n$progress-bar-color: gesso-color(ui, generic, accent) !default;\n$progress-border-color: gesso-color(ui, generic, border-dark) !default;\n$progress-border-radius: rem(3px) !default;\n$progress-text-color: gesso-color(text, on-light) !default;\n\n.progress {\n position: relative;\n}\n\n.progress__track {\n background-color: $progress-background-color;\n border: 1px solid $progress-border-color;\n border-radius: $progress-border-radius;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);\n height: 1rem;\n margin: rem(gesso-spacing('05')) 0;\n max-width: 100%;\n min-width: 6em;\n overflow: hidden;\n}\n\n.progress__bar {\n background-color: $progress-bar-color;\n border-radius: $progress-border-radius;\n height: 1rem;\n transition-duration: 0.5s;\n transition-property: width;\n transition-timing-function: ease-out;\n width: 3%;\n}\n\n.progress__description,\n.progress__percentage {\n color: $progress-text-color;\n font-size: font-size(body, 3xs);\n overflow: hidden;\n}\n\n.progress__description {\n float: left; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n float: right;\n }\n }\n}\n\n.progress__percentage {\n float: right; // LTR\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n float: left;\n }\n }\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/rss-feed/rss-feed.css b/services/drupal/web/themes/epa_theme/css/rss-feed/rss-feed.css new file mode 100644 index 0000000000..22d266ec6a --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/rss-feed/rss-feed.css @@ -0,0 +1,1822 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +.rss-feed { + display: inline-block; + margin-top: 1.5rem; +} +/*# sourceMappingURL=rss-feed.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/rss-feed/rss-feed.css.map b/services/drupal/web/themes/epa_theme/css/rss-feed/rss-feed.css.map new file mode 100644 index 0000000000..3a234748ee --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/rss-feed/rss-feed.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","rss-feed/rss-feed.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","rss-feed/rss-feed.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AUlwDA;EACE,qBAAA;EACA,kBAAA;AVqwDF","file":"rss-feed.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.rss-feed {\n display: inline-block;\n margin-top: 1.5rem;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for RSS feed.\n\n@use '../../00-config' as *;\n\n.rss-feed {\n display: inline-block;\n margin-top: rem(gesso-spacing(3));\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/site-alert/site-alert.css b/services/drupal/web/themes/epa_theme/css/site-alert/site-alert.css new file mode 100644 index 0000000000..e3e1f96349 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/site-alert/site-alert.css @@ -0,0 +1,1839 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +.usa-alert__close { + background: transparent; + border: 0; + color: #005ea2; + cursor: pointer; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 1.5rem; + padding: 0; + text-decoration: underline; + /* stylelint-disable-next-line selector-no-qualifying-type */ +} +.usa-alert__close:hover, .usa-alert__close:focus { + color: #1a4480; +} +.usa-alert__close:active { + color: #162e51; +} +html.no-js .usa-alert__close { + display: none; +} +/*# sourceMappingURL=site-alert.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/site-alert/site-alert.css.map b/services/drupal/web/themes/epa_theme/css/site-alert/site-alert.css.map new file mode 100644 index 0000000000..fa7214b763 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/site-alert/site-alert.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","site-alert/site-alert.css","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","site-alert/site-alert.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACxBA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACw0CJ;AD70CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AC+0CJ;ADp1CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;ACs1CJ;AD31CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC61CJ;ADl2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACo2CJ;ADz2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC22CJ;ADh3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACk3CJ;ADv3CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;ACy3CJ;AD93CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;ACg4CJ;ADr4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;ACu4CJ;AD54CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AC84CJ;ADn5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;ACq5CJ;AD15CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AC45CJ;ADj6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;ACm6CJ;ADx6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AC06CJ;AD/6CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;ACi7CJ;ADt7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;ACw7CJ;AD77CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AC+7CJ;AFn8CA,qBAAA;AGPA;EPiCE,kRAAA;EACA,kBAAA;EQzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AD+8CF;AKn9CI;EJVJ;IAiBI,WAAA;EDg9CF;AACF;AC98CE;EACE,YAAA;ADg9CJ;AC78CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AD+8CJ;AC58CE;EEnBA,YAAA;ECIA,yBAAA;AJ+9CF;AC38CE;EAEE,uBAAA;AD48CJ;ACz8CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;AP0/CF;AOx/CE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;APq/CJ;;AC/8CA;EElCE,cAAA;ECIA,yBAAA;AJk/CF;ACj9CE;EErCA,cAAA;ECIA,yBAAA;AJs/CF;ACj9CE;EEzCA,cAAA;ECIA,yBAAA;AJ0/CF;ACh9CE;EE9CA,YAAA;ECIA,yBAAA;AJ8/CF;;AC98CA;EEpDE,cAAA;ECIA,yBAAA;AJmgDF;ACh9CE;EEvDA,cAAA;ECIA,yBAAA;AJugDF;ACh9CE;EE3DA,YAAA;ECIA,yBAAA;AJ2gDF;AC/8CE;EEhEA,YAAA;ECIA,yBAAA;AJ+gDF;;AC78CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;ADg9CF;AC98CE;EACE,cAAA;ADg9CJ;AC78CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD88CJ;AC38CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD48CJ;ACz8CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADu8CJ;ACr8CI;EACE,cAAA;ADu8CN;ACp8CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;ADq8CN;ACl8CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;ADm8CN;ACh8CI;EKpIF,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AD68CN;ALnhDE;EACE,cAAA;AKqhDJ;ALlhDE;EACE,cAAA;AKohDJ;ALjhDE;EACE,cAAA;AKmhDJ;ALhhDE;EcpEA,8BAAA;EACA,iBAAA;ATulDF;AQnlDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARqkDJ;AQlkDE;EAEE,cAAA;ARmkDJ;AQhkDE;EACE,cAAA;ARkkDJ;AQ/jDE;EACE,cAAA;ARikDJ;ACx+CM;EACE,cAAA;AD0+CR;ACv+CM;EAEE,cAAA;ADw+CR;ACr+CM;EAEE,YAAA;ADs+CR;;ACh+CA;EE3IE,YAAA;ECIA,yBAAA;AJ4mDF;ACl+CE;EE9IA,YAAA;ECIA,yBAAA;AJgnDF;ACj+CE;EEnJA,YAAA;ECIA,yBAAA;AJonDF;;AC/9CA;EEzJE,YAAA;ECIA,yBAAA;AJynDF;ACj+CE;EE5JA,YAAA;ECIA,yBAAA;AJ6nDF;ACh+CE;EEjKA,YAAA;ECIA,yBAAA;AJioDF;;AC99CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;ADi+CF;;AC99CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;APgqDF;AO9pDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AP2pDJ;;ACt+CA;;;;;EAKE,6BAAA;ADy+CF;ACv+CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AD4/CJ;;ACx/CA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AD2/CF;ACz/CE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AD4/CJ;;ACx/CA;EK7NE,gCAAA;EACA,+BAAA;EX4DA,cAAA;EACA,0BAAA;Ea1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;ARytDF;ALpqDE;EACE,cAAA;AKsqDJ;ALnqDE;EACE,cAAA;AKqqDJ;ALlqDE;EACE,cAAA;AKoqDJ;ALjqDE;EcpEA,8BAAA;EACA,iBAAA;ATwuDF;AQpuDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;ARstDJ;AQntDE;EAEE,cAAA;ARotDJ;AQjtDE;EACE,cAAA;ARmtDJ;AQhtDE;EACE,cAAA;ARktDJ;;AUlwDA;EACE,uBAAA;EACA,SAAA;EACA,cAAA;EACA,eAAA;EACA,oBAAA;MAAA,cAAA;EACA,mBAAA;EACA,UAAA;EACA,0BAAA;EAWA,4DAAA;AV2vDF;AUpwDE;EAEE,cAAA;AVqwDJ;AUlwDE;EACE,cAAA;AVowDJ;AUhwDE;EACE,aAAA;AVkwDJ","file":"site-alert.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n.usa-alert__close {\n background: transparent;\n border: 0;\n color: #005ea2;\n cursor: pointer;\n flex-shrink: 0;\n margin-left: 1.5rem;\n padding: 0;\n text-decoration: underline;\n /* stylelint-disable-next-line selector-no-qualifying-type */\n}\n.usa-alert__close:hover, .usa-alert__close:focus {\n color: #1a4480;\n}\n.usa-alert__close:active {\n color: #162e51;\n}\nhtml.no-js .usa-alert__close {\n display: none;\n}","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Styles for a Sitewide Alert.\n\n@use '../../00-config' as *;\n\n.usa-alert__close {\n background: transparent;\n border: 0;\n color: gesso-color(text, link);\n cursor: pointer;\n flex-shrink: 0;\n margin-left: units(3);\n padding: 0;\n text-decoration: underline;\n\n &:hover,\n &:focus {\n color: gesso-color(text, link-hover);\n }\n\n &:active {\n color: gesso-color(text, link-active);\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n html.no-js & {\n display: none;\n }\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/teaser/teaser.css b/services/drupal/web/themes/epa_theme/css/teaser/teaser.css new file mode 100644 index 0000000000..5826562811 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/teaser/teaser.css @@ -0,0 +1,2689 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +ol, ul { + margin-bottom: 1em; + margin-top: 1em; + line-height: 1.5; + padding-left: 3ch; +} +ol:last-child, ul:last-child { + margin-bottom: 0; +} +ol ul, ul ul, +ol ol, +ul ol { + margin-top: 0.25em; +} + +li { + margin-bottom: 0.25em; + max-width: 68ex; +} +li:last-child { + margin-bottom: 0; +} + +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +* { + -webkit-transition-duration: 200ms; + transition-duration: 200ms; + -webkit-transition-property: background-color, border-color, color, opacity, text-shadow, -webkit-box-shadow, -webkit-transform; + transition-property: background-color, border-color, color, opacity, text-shadow, -webkit-box-shadow, -webkit-transform; + transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform; + transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform, -webkit-box-shadow, -webkit-transform; + -webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + +@media print { + * { + background-color: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #000 !important; + text-shadow: none !important; + } + + @page { + margin: 2cm; + } +} +[id] { + scroll-margin-top: 1em; +} + +html { + -webkit-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + -webkit-font-kerning: normal; + font-kerning: normal; + font-size: 100%; + min-height: 100%; +} + +body { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 1.5; + background-color: #fff; + color: #1b1b1b; + margin: 0; + padding: 0; + word-wrap: break-word; +} +body.has-open-mobile-menu { + overflow: hidden; + -webkit-overflow-scrolling: touch; +} + +@media print { + nav { + display: none; + } +} + +summary { + display: list-item; +} + +iframe { + border: 0; + max-width: 100%; +} +@media print { + iframe { + display: none; + } +} + +h6, +.h6, h5, +.h5, h4, +.h4, +.teaser__subtitle, h3, +.h3, +.teaser__title, h2, +.h2, h1 { + margin-bottom: 0; + margin-top: 0; + clear: none; + margin-bottom: 1rem; + clear: none; + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; + text-rendering: optimizeLegibility; +} +* + h6, +* + .h6, * + h5, +* + .h5, * + h4, +* + .h4, +* + .teaser__subtitle, * + h3, +* + .h3, +* + .teaser__title, * + h2, +* + .h2, * + h1 { + margin-top: 1em; +} +@media print { + h6, +.h6, h5, +.h5, h4, +.h4, +.teaser__subtitle, h3, +.h3, +.teaser__title, h2, +.h2, h1 { + orphans: 3; + page-break-after: avoid; + widows: 3; + } + h6::after, +.h6::after, h5::after, +.h5::after, h4::after, +.h4::after, +.teaser__subtitle::after, h3::after, +.h3::after, +.teaser__title::after, h2::after, +.h2::after, h1::after { + display: inline-block; + } +} + +h1 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 2.44rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h1 { + font-size: 1.95rem; + } +} + +h2, +.h2 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.95rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h2, +.h2 { + font-size: 1.34rem; + } +} + +h3, +.h3, +.teaser__title { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.34rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h3, +.h3, +.teaser__title { + font-size: 1.1rem; + } +} + +h4, +.h4, +.teaser__subtitle { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 0.98rem; + font-weight: 700; + line-height: 1.2; +} + +h5, +.h5 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 0.91rem; + font-weight: 700; + line-height: 1.2; +} + +h6, +.h6 { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 0.87rem; + font-weight: normal; + letter-spacing: 0.025em; + line-height: 1.1; + text-transform: uppercase; +} + +p { + line-height: 1.5; + margin-bottom: 1rem; + margin-top: 0; +} +@media print { + p { + orphans: 3; + widows: 3; + } +} +p:empty { + margin: 0 !important; +} + +a { + background-color: transparent; + color: #005ea2; + -webkit-text-decoration-skip: objects; +} +a:visited { + color: #54278f; +} +a:hover, a:focus { + color: #1a4480; +} +a:active { + color: #162e51; +} +@media print { + a, a:visited { + text-decoration: none; + } + a[href]::after { + content: " <" attr(href) ">"; + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 10pt; + font-weight: normal; + text-transform: lowercase; + } + a[href^="/"]::after { + content: " "; + } + a[href^="javascript:"]::after, a[href^="mailto:"]::after, a[href^="tel:"]::after, a[href^="#"]::after, a[href*="?"]::after { + content: ""; + } +} + +abbr[title] { + border-bottom: 1px dotted; + text-decoration: none; +} +@media (min-width: max-width 40rem) { + abbr[title] { + border-bottom: 0; + } + abbr[title]::after { + content: " (" attr(title) ")"; + } +} +abbr:hover { + cursor: help; +} +@media print { + abbr[title] { + border-bottom: 0; + } + abbr[title]::after { + content: " (" attr(title) ")"; + } +} + +cite { + color: #565c65; + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 0.93rem; + font-style: normal; + font-weight: normal; + letter-spacing: 0.025em; + line-height: 1.6; +} + +dfn { + font-style: normal; +} + +ins { + text-decoration: none; +} + +mark { + background: #ff0; + color: #000; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +var { + font-style: normal; +} + +blockquote { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.1rem; + font-weight: normal; + line-height: 1.7; + background-color: #fff; + border-left: 0.5rem solid #00bde3; + clear: both; + margin: 0 0 1.5rem; + padding: 1.25rem 0 1.25rem 1.25rem; +} +blockquote > :last-child { + margin-bottom: 0; +} +* + blockquote { + margin-top: 1.5rem; +} + +blockquote cite { + display: block; + margin: 1rem 0; + text-align: left; +} + +blockquote p { + color: inherit; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} +blockquote cite em { + border-left: 1px solid #71767a; + font-weight: normal; + margin-left: 0.25rem; + padding-left: 0.5rem; +} +@media print { + blockquote { + page-break-inside: avoid; + } +} + +pre { + margin: 0 0 1rem; + overflow: auto; +} +* + pre { + margin-top: 1rem; +} +@media print { + pre { + page-break-inside: avoid; + } +} + +hr { + border-top: solid #a9aeb1; + border-width: 1px 0 0; + -webkit-box-sizing: content-box; + box-sizing: content-box; + height: 0; + margin: 0 0 1.5rem; + overflow: auto; +} +* + hr { + margin-top: 1.5rem; +} + +address { + font-style: normal; +} + +ul { + list-style-type: disc; + margin-top: 0; +} +[dir=rtl] ul { + padding-left: 0; + padding-right: 3ch; +} +ul:last-child { + margin-bottom: revert; +} +ul ol, +ul ul { + margin-top: 0.5rem; +} +ul ul { + list-style-type: circle; +} +ul ul ul { + list-style-type: square; +} + +ol { + margin-top: 0; +} +[dir=rtl] ol { + padding-left: 0; + padding-right: 3ch; +} +ol:last-child { + margin-bottom: revert; +} +ol ol, +ol ul { + margin-top: 0.5rem; +} +ol ol { + list-style-type: lower-alpha; +} +ol ol ol { + list-style-type: lower-roman; +} + +li { + max-width: unset; +} +@media print { + li { + page-break-inside: avoid; + } +} + +dd { + margin: 0 0 1rem 3ch; +} +[dir=rtl] dd { + margin-left: 0; + margin-right: 3ch; +} + +dl { + margin: 0 0 1rem; +} + +table { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 1.5; + border-collapse: collapse; + border-spacing: 0; + color: #1b1b1b; + margin: 1.25rem 0; + text-align: left; + /* stylelint-disable selector-class-pattern */ + /* stylelint-enable selector-class-pattern */ +} +table thead th { + background-clip: padding-box; + color: #1b1b1b; + font-weight: 700; + line-height: 1.3; +} +table thead th, +table thead td { + background-color: #dfe1e2; + color: #1b1b1b; +} +table tbody th { + text-align: left; +} +table th, +table td { + background-color: white; + border: 1px solid #1b1b1b; + font-weight: normal; + padding: 0.5rem 1rem; +} +table caption { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1rem; + font-weight: 700; + margin-bottom: 0.75rem; + text-align: left; +} +table th[data-sortable] { + padding-right: 2.5rem; + position: relative; +} +table th[data-sortable]::after { + border-bottom-color: transparent; + border-bottom-style: solid; + border-bottom-width: 1px; + bottom: 0; + content: ""; + height: 0; + left: 0; + position: absolute; + width: 100%; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button, table th[data-sortable][aria-sort=none] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:visited, table th[data-sortable][aria-sort=none] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g.unsorted { + fill: #1b1b1b; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover .usa-icon > g.unsorted { + fill: black; +} +table th[data-sortable][aria-sort=descending], table th[data-sortable][aria-sort=ascending] { + background-color: #97d4ea; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g.descending { + fill: #1b1b1b; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g.ascending { + fill: #1b1b1b; +} +table thead th[aria-sort] { + background-color: #97d4ea; + color: #1b1b1b; +} +table td[data-sort-active], +table th[data-sort-active] { + background-color: #e1f3f8; + color: #1b1b1b; +} + +@media print { + thead { + display: table-header-group; + } +} + +tbody th { + background-color: #f0f0f0; + font-weight: 700; +} + +@media print { + tr { + page-break-inside: avoid; + } +} + +button { + overflow: visible; +} + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +input { + line-height: normal; +} + +legend { + border: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: inherit; + display: table; + margin: 0; + max-width: 100%; + padding: 0; + white-space: normal; +} + +optgroup { + font-weight: 700; +} + +textarea { + overflow: auto; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +canvas { + display: inline-block; +} + +figure { + margin: 0; +} + +img { + border: 0; + font-style: italic; + height: auto; + max-width: 100%; + vertical-align: middle; +} +@media print { + img { + max-width: 100% !important; + page-break-inside: avoid; + } +} + +svg:not(:root) { + overflow: hidden; +} + +.teaser { + margin-bottom: 1.5rem; +} +.teaser > :last-child { + margin-bottom: 0; +} +.teaser + .teaser { + border-top: 1px solid #dfe1e2; + padding-top: 1.5rem; +} + +.teaser__title { + margin: 0 0 0.25rem; +} + +.teaser__subtitle { + margin: 0.5rem 0 0.25rem; +} + +.teaser__metadata { + margin: 0 0 0.25rem; +} +.teaser__metadata > * { + margin: 0; +} + +.teaser__summary { + margin-bottom: 0.25rem; +} +.teaser__summary > :last-child { + margin-bottom: 0; +} +/*# sourceMappingURL=teaser.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/teaser/teaser.css.map b/services/drupal/web/themes/epa_theme/css/teaser/teaser.css.map new file mode 100644 index 0000000000..77589b5f1d --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/teaser/teaser.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/placeholders/_list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_margin.scss","teaser/teaser.css","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","../02-base/02-html-elements/00-universal/_universal.scss","../02-base/02-html-elements/01-html/_html.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-kerning.scss","../02-base/02-html-elements/02-body/_body.scss","../02-base/02-html-elements/10-nav/_nav.scss","../02-base/02-html-elements/11-details/_details.scss","../02-base/02-html-elements/12-iframe/_iframe.scss","../02-base/02-html-elements/13-headings/_headings.scss","../00-config/01-mixins/uswds-overrides/_mixins.uswds.typography.scss","../00-config/01-mixins/_mixins.display-text-style.scss","../00-config/01-mixins/_mixins.breakpoint.scss","../02-base/02-html-elements/14-paragraph/_paragraph.scss","../02-base/02-html-elements/15-inline-elements/_inline-elements.scss","../02-base/02-html-elements/16-blockquote/_blockquote.scss","../02-base/02-html-elements/17-preformatted-text/_preformatted-text.scss","../02-base/02-html-elements/18-horizontal-rule/_horizontal-rule.scss","../02-base/02-html-elements/19-address/_address.scss","../02-base/02-html-elements/20-unordered-list/_unordered-list.scss","../02-base/02-html-elements/21-ordered-list/_ordered-list.scss","../02-base/02-html-elements/22-list-item/_list-item.scss","../02-base/02-html-elements/23-definition-list/_definition-list.scss","../02-base/02-html-elements/24-table/_table.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_width.scss","../02-base/02-html-elements/25-forms/_forms.scss","../02-base/02-html-elements/26-media/_audio.scss","../02-base/02-html-elements/26-media/_canvas.scss","../02-base/02-html-elements/26-media/_figure.scss","../02-base/02-html-elements/26-media/_img.scss","../02-base/02-html-elements/26-media/_svg.scss","teaser/teaser.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACpBA;ECiCI,kBAAA;EACA,eAAA;EDhCF,gBAAA;EACA,iBAAA;AEk1CF;AFh1CE;EACE,gBAAA;AEk1CJ;AF/0CE;;;EAEE,kBAAA;AEk1CJ;;AF90CA;EACE,qBAAA;EACA,eAAA;AEi1CF;AF/0CE;EACE,gBAAA;AEi1CJ;;ACz2CA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AF+1CJ;AEp2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AFs2CJ;AE32CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AF62CJ;AEl3CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFo3CJ;AEz3CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;AF23CJ;AEh4CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFk4CJ;AEv4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;AFy4CJ;AE94CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;AFg5CJ;AEr5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFu5CJ;AE55CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;AF85CJ;AEn6CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AFq6CJ;AE16CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;AF46CJ;AEj7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AFm7CJ;AEx7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;AF07CJ;AE/7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AFi8CJ;AEt8CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;AFw8CJ;AE78CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;AF+8CJ;AEp9CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFs9CJ;AC19CA,qBAAA;AEPA;ETiCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AHs+CF;AO1+CI;EJVJ;IAiBI,WAAA;EHu+CF;AACF;AGr+CE;EACE,YAAA;AHu+CJ;AGp+CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AHs+CJ;AGn+CE;EEnBA,YAAA;ECIA,yBAAA;ANs/CF;AGl+CE;EAEE,uBAAA;AHm+CJ;AGh+CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;ATihDF;AS/gDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AT4gDJ;;AGt+CA;EElCE,cAAA;ECIA,yBAAA;ANygDF;AGx+CE;EErCA,cAAA;ECIA,yBAAA;AN6gDF;AGx+CE;EEzCA,cAAA;ECIA,yBAAA;ANihDF;AGv+CE;EE9CA,YAAA;ECIA,yBAAA;ANqhDF;;AGr+CA;EEpDE,cAAA;ECIA,yBAAA;AN0hDF;AGv+CE;EEvDA,cAAA;ECIA,yBAAA;AN8hDF;AGv+CE;EE3DA,YAAA;ECIA,yBAAA;ANkiDF;AGt+CE;EEhEA,YAAA;ECIA,yBAAA;ANsiDF;;AGp+CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHu+CF;AGr+CE;EACE,cAAA;AHu+CJ;AGp+CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHq+CJ;AGl+CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHm+CJ;AGh+CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;AH89CJ;AG59CI;EACE,cAAA;AH89CN;AG39CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AH49CN;AGz9CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;AH09CN;AGv9CI;EKpIF,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AHo+CN;AL1iDE;EACE,cAAA;AK4iDJ;ALziDE;EACE,cAAA;AK2iDJ;ALxiDE;EACE,cAAA;AK0iDJ;ALviDE;EgBpEA,8BAAA;EACA,iBAAA;AX8mDF;AU1mDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV4lDJ;AUzlDE;EAEE,cAAA;AV0lDJ;AUvlDE;EACE,cAAA;AVylDJ;AUtlDE;EACE,cAAA;AVwlDJ;AG//CM;EACE,cAAA;AHigDR;AG9/CM;EAEE,cAAA;AH+/CR;AG5/CM;EAEE,YAAA;AH6/CR;;AGv/CA;EE3IE,YAAA;ECIA,yBAAA;ANmoDF;AGz/CE;EE9IA,YAAA;ECIA,yBAAA;ANuoDF;AGx/CE;EEnJA,YAAA;ECIA,yBAAA;AN2oDF;;AGt/CA;EEzJE,YAAA;ECIA,yBAAA;ANgpDF;AGx/CE;EE5JA,YAAA;ECIA,yBAAA;ANopDF;AGv/CE;EEjKA,YAAA;ECIA,yBAAA;ANwpDF;;AGr/CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;AHw/CF;;AGr/CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;ATurDF;ASrrDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;ATkrDJ;;AG7/CA;;;;;EAKE,6BAAA;AHggDF;AG9/CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AHmhDJ;;AG/gDA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AHkhDF;AGhhDE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHmhDJ;;AG/gDA;EK7NE,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;AVgvDF;AL3rDE;EACE,cAAA;AK6rDJ;AL1rDE;EACE,cAAA;AK4rDJ;ALzrDE;EACE,cAAA;AK2rDJ;ALxrDE;EgBpEA,8BAAA;EACA,iBAAA;AX+vDF;AU3vDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV6uDJ;AU1uDE;EAEE,cAAA;AV2uDJ;AUxuDE;EACE,cAAA;AV0uDJ;AUvuDE;EACE,cAAA;AVyuDJ;;AYzxDA;EACE,kCAAA;UAAA,0BAAA;EACA,+HAAA;EAAA,uHAAA;EAAA,uGAAA;EAAA,8IAAA;EAEA,8DAAA;UAAA,sDAAA;AZ2xDF;;AYxxDA;EACE;IACE,wCAAA;IACA,mCAAA;YAAA,2BAAA;IACA,sBAAA;IACA,4BAAA;EZ2xDF;;EYxxDA;IACE,WAAA;EZ2xDF;AACF;AYxxDA;EACE,sBAAA;AZ0xDF;;Aa9yDA;ECLE,uCAAA;UAAA,+BAAA;EACA,4BAAA;UAAA,oBAAA;EDMA,eAAA;EACA,gBAAA;AbkzDF;;AetzDA;ErBoCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;EWVA,sBAAA;EACA,cAAA;EACA,SAAA;EACA,UAAA;EACA,qBAAA;Af2zDF;AexzDE;EACE,gBAAA;EACA,iCAAA;Af0zDJ;;AgBt0DE;EADF;IAEI,aAAA;EhB00DF;AACF;;AiB30DA;EACE,kBAAA;AjB80DF;;AkBj1DA;EACE,SAAA;EACA,eAAA;AlBo1DF;AkBl1DE;EAJF;IAKI,aAAA;ElBq1DF;AACF;;AmBz1DA;;;;;;;;EpBgCI,gBAAA;EACA,aAAA;EqB/BF,WAAA;EACA,mBAAA;EDDA,WAAA;EACA,qBAAA;MAAA,iBAAA;UAAA,aAAA;EACA,kCAAA;AnBs2DF;AoBr2DE;;;;;;;;EACE,eAAA;ApB82DJ;AmB92DE;EANF;;;;;;;;IAOI,UAAA;IACA,uBAAA;IACA,SAAA;EnBw3DF;EmBt3DE;;;;;;;;IACE,qBAAA;EnB+3DJ;AACF;;AmB33DA;EETM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArB24DN;AsB14DE;EHQF;IAMI,kBAAA;EnBg4DF;AACF;;AmB73DA;;EEnBM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBw5DN;AsBv5DE;EHkBF;;IAOI,kBAAA;EnBm4DF;AACF;;AmBh4DA;;;EE9BM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBu6DN;AsBt6DE;EH6BF;;;IAOI,iBAAA;EnBw4DF;AACF;;AmBr4DA;;;EEzCM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBu7DN;;AmBv4DA;;EEhDM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArB+7DN;;AmBx4DA;;EEvDM,kRAAA;EAFA,kBAAA;EAEA,mBAAA;EAAA,uBAAA;EAAA,gBAAA;EAAA,yBAAA;ArBy8DN;;AuBj9DA;EHWE,gBAAA;EACA,mBAAA;EACA,aAAA;ApB08DF;AuBp9DE;EAHF;IAII,UAAA;IACA,SAAA;EvBu9DF;AACF;AuBn9DI;EACE,oBAAA;AvBq9DN;;AwBh+DA;EACE,6BAAA;EACA,cAAA;EACA,qCAAA;AxBm+DF;AwBj+DE;EACE,cAAA;AxBm+DJ;AwBh+DE;EAEE,cAAA;AxBi+DJ;AwB99DE;EACE,cAAA;AxBg+DJ;AwB79DE;EACE;IAEE,qBAAA;ExB89DJ;EwB39DE;IACE,4BAAA;IACA,kRAAA;IACA,eAAA;IACA,mBAAA;IACA,yBAAA;ExB69DJ;EwB19DE;IACE,2CAAA;ExB49DJ;EwBz9DE;IAKE,WAAA;ExBu9DJ;AACF;;AwBl9DE;EACE,yBAAA;EACA,qBAAA;AxBq9DJ;AsB7/DE;EEsCA;IAKI,gBAAA;ExBs9DJ;EwBp9DI;IACE,6BAAA;ExBs9DN;AACF;AwBl9DE;EACE,YAAA;AxBo9DJ;AwBj9DE;EACE;IACE,gBAAA;ExBm9DJ;EwBj9DI;IACE,6BAAA;ExBm9DN;AACF;;AwB58DA;EHrEM,cAAA;EAAA,kRAAA;EAFA,kBAAA;EAEA,kBAAA;EAAA,mBAAA;EAAA,uBAAA;EAAA,gBAAA;ArB2hEN;;AwB98DA;EACE,kBAAA;AxBi9DF;;AwB18DA;EACE,qBAAA;AxB68DF;;AwBx8DA;EACE,gBAAA;EACA,WAAA;AxB28DF;;AwBl8DA;EACE,cAAA;AxBq8DF;;AwBh8DA;;EAEE,cAAA;EACA,cAAA;EACA,kBAAA;EACA,wBAAA;AxBm8DF;;AwBh8DA;EACE,eAAA;AxBm8DF;;AwBh8DA;EACE,WAAA;AxBm8DF;;AwB57DA;EACE,kBAAA;AxB+7DF;;AyBtkEA;EJMM,wRAAA;EAFA,iBAAA;EAEA,mBAAA;EAAA,gBAAA;EIJJ,sBAAA;EACA,iCAAA;EACA,WAAA;EACA,kBAAA;EACA,kCAAA;AzB4kEF;AyBzkEE;EACE,gBAAA;AzB2kEJ;AyBvkEE;EACE,kBAAA;AzBykEJ;;AyBrkEA;EACE,cAAA;EACA,cAAA;EACA,gBAAA;AzBwkEF;;AyBlkEE;EACE,cAAA;EACA,oBAAA;EACA,kBAAA;EACA,oBAAA;EACA,oBAAA;AzBqkEJ;AyB/jEI;EACE,8BAAA;EACA,mBAAA;EACA,oBAAA;EACA,oBAAA;AzBikEN;AyB7jEE;EAtBF;IAuBI,wBAAA;EzBgkEF;AACF;;A0BnnEA;EACE,gBAAA;EACA,cAAA;A1BsnEF;A0BnnEE;EACE,gBAAA;A1BqnEJ;A0BlnEE;EATF;IAUI,wBAAA;E1BqnEF;AACF;;A2BhoEA;EACE,yBAAA;EACA,qBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;A3BmoEF;A2BhoEE;EACE,kBAAA;A3BkoEJ;;A4B9oEA;EACE,kBAAA;A5BipEF;;A6BhpEA;EAEE,qBAAA;EACA,aAAA;A7BkpEF;A6B/oEI;EACE,eAAA;EACA,kBAAA;A7BipEN;A6B7oEE;EACE,qBAAA;A7B+oEJ;A6B5oEE;;EAEE,kBAAA;A7B8oEJ;A6B3oEE;EACE,uBAAA;A7B6oEJ;A6B3oEI;EACE,uBAAA;A7B6oEN;;A8BtqEA;EAEE,aAAA;A9BwqEF;A8BrqEI;EACE,eAAA;EACA,kBAAA;A9BuqEN;A8BnqEE;EACE,qBAAA;A9BqqEJ;A8BlqEE;;EAEE,kBAAA;A9BoqEJ;A8BjqEE;EACE,4BAAA;A9BmqEJ;A8BjqEI;EACE,4BAAA;A9BmqEN;;A+B3rEA;EAEE,gBAAA;A/B6rEF;A+B3rEE;EAJF;IAKI,wBAAA;E/B8rEF;AACF;;AgCpsEA;EACE,oBAAA;AhCusEF;AgCpsEI;EACE,cAAA;EACA,iBAAA;AhCssEN;;AgCjsEA;EACE,gBAAA;AhCosEF;;AiChtEA;EvCoCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;E8BkMA,yBAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;EACA,gBAAA;EAuCA,6CAAA;EA4BA,4CAAA;AlCw8DF;AkCxgEI;EACE,4BAAA;EACA,cA/MoB;EAgNpB,gBAAA;EACA,gBAAA;AlC0gEN;AkCpgEI;;EAEE,yBAAA;EACA,cA1NoB;AlCguE1B;AkClgEI;EACE,gBAAA;AlCogEN;AkCjgEE;;EAEE,uBAAA;EACA,yBAAA;EACA,mBAAA;EACA,oBAAA;AlCmgEJ;AkChgEE;ExC9MA,kRAAA;EACA,eAAA;EwC+ME,gBAAA;EACA,sBAAA;EACA,gBAAA;AlCmgEJ;AkC//DE;EA1LA,qBAAA;EACA,kBAAA;AlC4rEF;AkC3rEE;EACE,gCAAA;EACA,0BAAA;EACA,wBAAA;EACA,SAAA;EACA,WAAA;EACA,SAAA;EACA,OAAA;EACA,kBAAA;EACA,WAAA;AlC6rEJ;AkCzgEM;E1B9PJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlCssEF;ALnuEE;EACE,cAAA;AKquEJ;ALluEE;EACE,cAAA;AKouEJ;ALjuEE;EACE,cAAA;AKmuEJ;ALhuEE;EgBpEA,8BAAA;EACA,iBAAA;AXuyEF;AUnyEE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AVqxEJ;AUlxEE;EAEE,cAAA;AVmxEJ;AUhxEE;EACE,cAAA;AVkxEJ;AU/wEE;EACE,cAAA;AVixEJ;AkCluEE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlCquEJ;AkCpuEI;EACE,iBAAA;AlCsuEN;AkC5tEE;EACE,aAAA;AlC8tEJ;AkC5tEE;EACE,WAAA;AlC8tEJ;AkC3kEI;EAEE,yBAAA;AlC4kEN;AkCxkEM;E1BzQJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlCgxEF;AL7yEE;EACE,cAAA;AK+yEJ;AL5yEE;EACE,cAAA;AK8yEJ;AL3yEE;EACE,cAAA;AK6yEJ;AL1yEE;EgBpEA,8BAAA;EACA,iBAAA;AXi3EF;AU72EE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV+1EJ;AU51EE;EAEE,cAAA;AV61EJ;AU11EE;EACE,cAAA;AV41EJ;AUz1EE;EACE,cAAA;AV21EJ;AkC5yEE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlC+yEJ;AkC9yEI;EACE,iBAAA;AlCgzEN;AkCnxEE;EACE,aAlFsB;AlCu2E1B;AkCtoEM;E1B/QJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlCo1EF;ALj3EE;EACE,cAAA;AKm3EJ;ALh3EE;EACE,cAAA;AKk3EJ;AL/2EE;EACE,cAAA;AKi3EJ;AL92EE;EgBpEA,8BAAA;EACA,iBAAA;AXq7EF;AUj7EE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AVm6EJ;AUh6EE;EAEE,cAAA;AVi6EJ;AU95EE;EACE,cAAA;AVg6EJ;AU75EE;EACE,cAAA;AV+5EJ;AkCh3EE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlCm3EJ;AkCl3EI;EACE,iBAAA;AlCo3EN;AkC91EE;EACE,aA3EsB;AlC26E1B;AkClsEI;EACE,yBAAA;EACA,cA3P2B;AlC+7EjC;AkChsEE;;EAEE,yBAAA;EACA,cAzQsB;AlC28E1B;;AiC99EE;EADF;IAEI,2BAAA;EjCk+EF;AACF;;AiC99EE;EACE,yBAAA;EACA,gB9GkTqB;A6E+qEzB;;AiC59EE;EADF;IAEI,wBAAA;EjCg+EF;AACF;;AqCl/EA;EACE,iBAAA;ArCq/EF;;AqCh/EA;EACE,SAAA;EACA,SAAA;EACA,UAAA;ArCm/EF;;AqC3+EA;EACE,mBAAA;ArC8+EF;;AqCl9EA;EACE,SAAA;EACA,8BAAA;UAAA,sBAAA;EACA,cAAA;EACA,cAAA;EACA,SAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;ArCq9EF;;AqCh9EA;EACE,gBAAA;ArCm9EF;;AqCx8EA;EACE,cAAA;ArC28EF;;AsCthFE;EACE,aAAA;EACA,SAAA;AtCyhFJ;;AuC5hFA;EACE,qBAAA;AvC+hFF;;AwChiFA;EACE,SAAA;AxCmiFF;;AyCpiFA;EACE,SAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;AzCuiFF;AyCriFE;EAPF;IAQI,0BAAA;IACA,wBAAA;EzCwiFF;AACF;;A0CjjFE;EACE,gBAAA;A1CojFJ;;A2CnjFA;EACE,qBAAA;A3CsjFF;A2CpjFE;EACE,gBAAA;A3CsjFJ;A2CnjFE;EACE,6BAAA;EACA,mBAAA;A3CqjFJ;;A2CjjFA;EAEE,mBAAA;A3CmjFF;;A2ChjFA;EAEE,wBAAA;A3CkjFF;;A2C/iFA;EACE,mBAAA;A3CkjFF;A2ChjFE;EACE,SAAA;A3CkjFJ;;A2C9iFA;EACE,sBAAA;A3CijFF;A2C/iFE;EACE,gBAAA;A3CijFJ","file":"teaser.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","@use \"../settings\" as *;\n@use \"../functions/utilities\" as *;\n@use \"../mixins/utilities/margin\" as *;\n\n%usa-list {\n @include u-margin-y(1em);\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n padding-left: 3ch;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ul,\n ol {\n margin-top: 0.25em;\n }\n}\n\n%usa-list-item {\n margin-bottom: 0.25em;\n max-width: measure($theme-text-measure);\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Adds margin either l/r(x) or t/b(y)\n\n@mixin margin-n($side, $value...) {\n $value: unpack($value);\n @if $side == all {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin: get-uswds-value(margin, $value...) #{$important};\n } @else if $side == x {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-left: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n margin-right: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n } @else if $side == y {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-bottom: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n margin-top: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == t {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-top: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == r {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-right: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n } @else if $side == b {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-bottom: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == l {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-left: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n }\n}\n\n@mixin u-margin($value...) {\n @include margin-n(all, $value...);\n}\n\n@mixin u-margin-x($value...) {\n @include margin-n(x, $value...);\n}\n\n@mixin u-margin-y($value...) {\n @include margin-n(y, $value...);\n}\n\n@mixin u-margin-top($value...) {\n @include margin-n(t, $value...);\n}\n\n@mixin u-margin-right($value...) {\n @include margin-n(r, $value...);\n}\n\n@mixin u-margin-bottom($value...) {\n @include margin-n(b, $value...);\n}\n\n@mixin u-margin-left($value...) {\n @include margin-n(l, $value...);\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\nol, ul {\n margin-bottom: 1em;\n margin-top: 1em;\n line-height: 1.5;\n padding-left: 3ch;\n}\nol:last-child, ul:last-child {\n margin-bottom: 0;\n}\nol ul, ul ul,\nol ol,\nul ol {\n margin-top: 0.25em;\n}\n\nli {\n margin-bottom: 0.25em;\n max-width: 68ex;\n}\nli:last-child {\n margin-bottom: 0;\n}\n\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n* {\n transition-duration: 200ms;\n transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform;\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important;\n text-shadow: none !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n[id] {\n scroll-margin-top: 1em;\n}\n\nhtml {\n font-feature-settings: \"kern\" 1;\n font-kerning: normal;\n font-size: 100%;\n min-height: 100%;\n}\n\nbody {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.5;\n background-color: #fff;\n color: #1b1b1b;\n margin: 0;\n padding: 0;\n word-wrap: break-word;\n}\nbody.has-open-mobile-menu {\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n}\n\n@media print {\n nav {\n display: none;\n }\n}\n\nsummary {\n display: list-item;\n}\n\niframe {\n border: 0;\n max-width: 100%;\n}\n@media print {\n iframe {\n display: none;\n }\n}\n\nh6,\n.h6, h5,\n.h5, h4,\n.h4,\n.teaser__subtitle, h3,\n.h3,\n.teaser__title, h2,\n.h2, h1 {\n margin-bottom: 0;\n margin-top: 0;\n clear: none;\n margin-bottom: 1rem;\n clear: none;\n hyphens: none;\n text-rendering: optimizeLegibility;\n}\n* + h6,\n* + .h6, * + h5,\n* + .h5, * + h4,\n* + .h4,\n* + .teaser__subtitle, * + h3,\n* + .h3,\n* + .teaser__title, * + h2,\n* + .h2, * + h1 {\n margin-top: 1em;\n}\n@media print {\n h6,\n.h6, h5,\n.h5, h4,\n.h4,\n.teaser__subtitle, h3,\n.h3,\n.teaser__title, h2,\n.h2, h1 {\n orphans: 3;\n page-break-after: avoid;\n widows: 3;\n }\n h6::after,\n.h6::after, h5::after,\n.h5::after, h4::after,\n.h4::after,\n.teaser__subtitle::after, h3::after,\n.h3::after,\n.teaser__title::after, h2::after,\n.h2::after, h1::after {\n display: inline-block;\n }\n}\n\nh1 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 2.44rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h1 {\n font-size: 1.95rem;\n }\n}\n\nh2,\n.h2 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.95rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h2,\n.h2 {\n font-size: 1.34rem;\n }\n}\n\nh3,\n.h3,\n.teaser__title {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.34rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h3,\n.h3,\n.teaser__title {\n font-size: 1.1rem;\n }\n}\n\nh4,\n.h4,\n.teaser__subtitle {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 0.98rem;\n font-weight: 700;\n line-height: 1.2;\n}\n\nh5,\n.h5 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 0.91rem;\n font-weight: 700;\n line-height: 1.2;\n}\n\nh6,\n.h6 {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 0.87rem;\n font-weight: normal;\n letter-spacing: 0.025em;\n line-height: 1.1;\n text-transform: uppercase;\n}\n\np {\n line-height: 1.5;\n margin-bottom: 1rem;\n margin-top: 0;\n}\n@media print {\n p {\n orphans: 3;\n widows: 3;\n }\n}\np:empty {\n margin: 0 !important;\n}\n\na {\n background-color: transparent;\n color: #005ea2;\n -webkit-text-decoration-skip: objects;\n}\na:visited {\n color: #54278f;\n}\na:hover, a:focus {\n color: #1a4480;\n}\na:active {\n color: #162e51;\n}\n@media print {\n a, a:visited {\n text-decoration: none;\n }\n a[href]::after {\n content: \" <\" attr(href) \">\";\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 10pt;\n font-weight: normal;\n text-transform: lowercase;\n }\n a[href^=\"/\"]::after {\n content: \" \";\n }\n a[href^=\"javascript:\"]::after, a[href^=\"mailto:\"]::after, a[href^=\"tel:\"]::after, a[href^=\"#\"]::after, a[href*=\"?\"]::after {\n content: \"\";\n }\n}\n\nabbr[title] {\n border-bottom: 1px dotted;\n text-decoration: none;\n}\n@media (min-width: max-width 40rem) {\n abbr[title] {\n border-bottom: 0;\n }\n abbr[title]::after {\n content: \" (\" attr(title) \")\";\n }\n}\nabbr:hover {\n cursor: help;\n}\n@media print {\n abbr[title] {\n border-bottom: 0;\n }\n abbr[title]::after {\n content: \" (\" attr(title) \")\";\n }\n}\n\ncite {\n color: #565c65;\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 0.93rem;\n font-style: normal;\n font-weight: normal;\n letter-spacing: 0.025em;\n line-height: 1.6;\n}\n\ndfn {\n font-style: normal;\n}\n\nins {\n text-decoration: none;\n}\n\nmark {\n background: #ff0;\n color: #000;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\nvar {\n font-style: normal;\n}\n\nblockquote {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.1rem;\n font-weight: normal;\n line-height: 1.7;\n background-color: #fff;\n border-left: 0.5rem solid #00bde3;\n clear: both;\n margin: 0 0 1.5rem;\n padding: 1.25rem 0 1.25rem 1.25rem;\n}\nblockquote > :last-child {\n margin-bottom: 0;\n}\n* + blockquote {\n margin-top: 1.5rem;\n}\n\nblockquote cite {\n display: block;\n margin: 1rem 0;\n text-align: left;\n}\n\nblockquote p {\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\nblockquote cite em {\n border-left: 1px solid #71767a;\n font-weight: normal;\n margin-left: 0.25rem;\n padding-left: 0.5rem;\n}\n@media print {\n blockquote {\n page-break-inside: avoid;\n }\n}\n\npre {\n margin: 0 0 1rem;\n overflow: auto;\n}\n* + pre {\n margin-top: 1rem;\n}\n@media print {\n pre {\n page-break-inside: avoid;\n }\n}\n\nhr {\n border-top: solid #a9aeb1;\n border-width: 1px 0 0;\n box-sizing: content-box;\n height: 0;\n margin: 0 0 1.5rem;\n overflow: auto;\n}\n* + hr {\n margin-top: 1.5rem;\n}\n\naddress {\n font-style: normal;\n}\n\nul {\n list-style-type: disc;\n margin-top: 0;\n}\n[dir=rtl] ul {\n padding-left: 0;\n padding-right: 3ch;\n}\nul:last-child {\n margin-bottom: revert;\n}\nul ol,\nul ul {\n margin-top: 0.5rem;\n}\nul ul {\n list-style-type: circle;\n}\nul ul ul {\n list-style-type: square;\n}\n\nol {\n margin-top: 0;\n}\n[dir=rtl] ol {\n padding-left: 0;\n padding-right: 3ch;\n}\nol:last-child {\n margin-bottom: revert;\n}\nol ol,\nol ul {\n margin-top: 0.5rem;\n}\nol ol {\n list-style-type: lower-alpha;\n}\nol ol ol {\n list-style-type: lower-roman;\n}\n\nli {\n max-width: unset;\n}\n@media print {\n li {\n page-break-inside: avoid;\n }\n}\n\ndd {\n margin: 0 0 1rem 3ch;\n}\n[dir=rtl] dd {\n margin-left: 0;\n margin-right: 3ch;\n}\n\ndl {\n margin: 0 0 1rem;\n}\n\ntable {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.5;\n border-collapse: collapse;\n border-spacing: 0;\n color: #1b1b1b;\n margin: 1.25rem 0;\n text-align: left;\n /* stylelint-disable selector-class-pattern */\n /* stylelint-enable selector-class-pattern */\n}\ntable thead th {\n background-clip: padding-box;\n color: #1b1b1b;\n font-weight: 700;\n line-height: 1.3;\n}\ntable thead th,\ntable thead td {\n background-color: #dfe1e2;\n color: #1b1b1b;\n}\ntable tbody th {\n text-align: left;\n}\ntable th,\ntable td {\n background-color: white;\n border: 1px solid #1b1b1b;\n font-weight: normal;\n padding: 0.5rem 1rem;\n}\ntable caption {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1rem;\n font-weight: 700;\n margin-bottom: 0.75rem;\n text-align: left;\n}\ntable th[data-sortable] {\n padding-right: 2.5rem;\n position: relative;\n}\ntable th[data-sortable]::after {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-bottom-width: 1px;\n bottom: 0;\n content: \"\";\n height: 0;\n left: 0;\n position: absolute;\n width: 100%;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button, table th[data-sortable][aria-sort=none] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:visited, table th[data-sortable][aria-sort=none] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g.unsorted {\n fill: #1b1b1b;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover .usa-icon > g.unsorted {\n fill: black;\n}\ntable th[data-sortable][aria-sort=descending], table th[data-sortable][aria-sort=ascending] {\n background-color: #97d4ea;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g.descending {\n fill: #1b1b1b;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g.ascending {\n fill: #1b1b1b;\n}\ntable thead th[aria-sort] {\n background-color: #97d4ea;\n color: #1b1b1b;\n}\ntable td[data-sort-active],\ntable th[data-sort-active] {\n background-color: #e1f3f8;\n color: #1b1b1b;\n}\n\n@media print {\n thead {\n display: table-header-group;\n }\n}\n\ntbody th {\n background-color: #f0f0f0;\n font-weight: 700;\n}\n\n@media print {\n tr {\n page-break-inside: avoid;\n }\n}\n\nbutton {\n overflow: visible;\n}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\ninput {\n line-height: normal;\n}\n\nlegend {\n border: 0;\n box-sizing: border-box;\n color: inherit;\n display: table;\n margin: 0;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\noptgroup {\n font-weight: 700;\n}\n\ntextarea {\n overflow: auto;\n}\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\ncanvas {\n display: inline-block;\n}\n\nfigure {\n margin: 0;\n}\n\nimg {\n border: 0;\n font-style: italic;\n height: auto;\n max-width: 100%;\n vertical-align: middle;\n}\n@media print {\n img {\n max-width: 100% !important;\n page-break-inside: avoid;\n }\n}\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n.teaser {\n margin-bottom: 1.5rem;\n}\n.teaser > :last-child {\n margin-bottom: 0;\n}\n.teaser + .teaser {\n border-top: 1px solid #dfe1e2;\n padding-top: 1.5rem;\n}\n\n.teaser__title {\n margin: 0 0 0.25rem;\n}\n\n.teaser__subtitle {\n margin: 0.5rem 0 0.25rem;\n}\n\n.teaser__metadata {\n margin: 0 0 0.25rem;\n}\n.teaser__metadata > * {\n margin: 0;\n}\n\n.teaser__summary {\n margin-bottom: 0.25rem;\n}\n.teaser__summary > :last-child {\n margin-bottom: 0;\n}","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Universal styles.\n\n@use '../../../00-config' as *;\n\n* {\n transition-duration: gesso-duration(short);\n transition-property: background-color, border-color, box-shadow, color,\n opacity, text-shadow, transform;\n transition-timing-function: gesso-easing(ease-in);\n}\n\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important;\n text-shadow: none !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n\n[id] {\n scroll-margin-top: 1em;\n}\n","// @file\n// HTML styles.\n\n@use 'sass:math';\n@use '../../../00-config' as *;\n\nhtml {\n @include add-kerning();\n font-size: 100% * math.div(gesso-base-font-size(), 16px);\n min-height: 100%;\n}\n","@mixin add-kerning {\n font-feature-settings: \"kern\" 1;\n font-kerning: normal;\n}\n","// @file\n// Body styles.\n\n@use '../../../00-config' as *;\n\nbody {\n @include typeset();\n background-color: gesso-color(background, site);\n color: gesso-color(text, primary);\n margin: 0;\n padding: 0;\n word-wrap: break-word;\n\n // stylelint-disable selector-no-qualifying-type\n &.has-open-mobile-menu {\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n }\n // stylelint-enable\n\n // Tweak styling in WYSIWYG editor.\n @if $wysiwyg {\n padding: 0 rem(gesso-site-margins(desktop));\n }\n}\n","// @file\n// Nav element styles.\n\nnav {\n @media print {\n display: none;\n }\n}\n","// @file\n// Details element styles.\n\n// details {}\n\nsummary {\n display: list-item;\n}\n","// @file\n// Iframe element styles.\n\niframe {\n border: 0;\n max-width: 100%;\n\n @media print {\n display: none;\n }\n}\n","// @file\n// Heading styles.\n\n@use '../../../00-config' as *;\n\n%hN {\n @include typeset-heading();\n clear: none;\n hyphens: none;\n text-rendering: optimizeLegibility;\n\n @media print {\n orphans: 3;\n page-break-after: avoid;\n widows: 3;\n\n &::after {\n display: inline-block;\n }\n }\n}\n\nh1,\n%h1 {\n @extend %hN;\n @include display-text-style(h1);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, xl);\n }\n}\n\nh2,\n.h2,\n%h2 {\n @extend %hN;\n @include display-text-style(h2);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, lg);\n }\n}\n\nh3,\n.h3,\n%h3 {\n @extend %hN;\n @include display-text-style(h3);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, md);\n }\n}\n\nh4,\n.h4,\n%h4 {\n @extend %hN;\n @include display-text-style(h4);\n}\n\nh5,\n.h5,\n%h5 {\n @extend %hN;\n @include display-text-style(h5);\n}\n\nh6,\n.h6,\n%h6 {\n @extend %hN;\n @include display-text-style(h6);\n}\n","// @file\n// Overrides for USWDS typography mixins\n\n@use '../../00-functions' as *;\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: none;\n margin-bottom: rem(gesso-spacing(2));\n\n * + & {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: rem(gesso-spacing(2));\n margin-top: 0;\n}\n","// @file\n// Display text styles\n\n@use '../00-functions' as *;\n\n@mixin display-text-style($keys...) {\n $display: gesso-get-map(typography, display, $keys...);\n\n @each $property, $value in $display {\n @if ($property == 'font-size') {\n // Check for px if not output value.\n #{$property}: #{rem(convert($value))};\n } @else {\n #{$property}: #{$value};\n }\n }\n}\n","// Mixins: Breakpoint\n// A 16px base value is passed to em() functions within breakpoint mixins due\n// to browsers not using the Gesso base font size for media query calculations.\n\n@use 'sass:string';\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n\n// Create a min-width media query.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint-min($breakpoint) {\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (min-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Assume min-width if shorthand breakpoint mixin is used.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint($breakpoint) {\n @include breakpoint-min($breakpoint) {\n @content;\n }\n}\n\n// Create a max-width media query.\n// @param {Number} $breakpoint - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint value.\n@mixin breakpoint-max($breakpoint, $subtract_1_from_max: false) {\n @if $subtract_1_from_max {\n $breakpoint: px($breakpoint) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (max-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Create a media query with both min-width and max-width.\n// @param {Number} $breakpoint-min - width value.\n// @param {Number} $breakpoint-max - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint-max value.\n@mixin breakpoint-min-max(\n $breakpoint-min,\n $breakpoint-max,\n $subtract_1_from_max: false\n) {\n @if $subtract_1_from_max {\n $breakpoint-max: px($breakpoint-max) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint-min: em($breakpoint-min, 16px);\n $breakpoint-max: em($breakpoint-max, 16px);\n }\n @media (min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max}) {\n @content;\n }\n}\n","// @file\n// Paragraph styles.\n\n@use '../../../00-config' as *;\n\np {\n @include typeset-p();\n\n @media print {\n orphans: 3;\n widows: 3;\n }\n\n // Hide empty paragraphs except in WYSIWYG editor.\n @if not $wysiwyg {\n &:empty {\n margin: 0 !important;\n }\n }\n}\n","// @file\n// Inline element styles.\n\n@use '../../../00-config' as *;\n\na {\n background-color: transparent;\n color: gesso-color(text, link);\n -webkit-text-decoration-skip: objects;\n\n &:visited {\n color: gesso-color(text, link-visited);\n }\n\n &:hover,\n &:focus {\n color: gesso-color(text, link-hover);\n }\n\n &:active {\n color: gesso-color(text, link-active);\n }\n\n @media print {\n &,\n &:visited {\n text-decoration: none;\n }\n\n &[href]::after {\n content: ' <' attr(href) '>';\n font-family: font-family(body);\n font-size: 10pt;\n font-weight: normal;\n text-transform: lowercase;\n }\n\n &[href^='/']::after {\n content: ' ';\n }\n\n &[href^='javascript:']::after,\n &[href^='mailto:']::after,\n &[href^='tel:']::after,\n &[href^='#']::after,\n &[href*='?']::after {\n content: '';\n }\n }\n}\n\nabbr {\n &[title] {\n border-bottom: 1px dotted;\n text-decoration: none;\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n border-bottom: 0;\n\n &::after {\n content: ' (' attr(title) ')';\n }\n }\n }\n\n &:hover {\n cursor: help;\n }\n\n @media print {\n &[title] {\n border-bottom: 0;\n\n &::after {\n content: ' (' attr(title) ')';\n }\n }\n }\n}\n\n// b {}\n\ncite {\n @include display-text-style(cite);\n}\n\n// code {}\n\n// del {}\n\ndfn {\n font-style: normal;\n}\n\n// em {}\n\n// i {}\n\nins {\n text-decoration: none;\n}\n\n// kbd {}\n\nmark {\n background: #ff0;\n color: #000;\n}\n\n// q {}\n\n// s {}\n\n// samp {}\n\nsmall {\n font-size: 80%;\n}\n\n// strong {}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n// time {}\n\n// u {}\n\nvar {\n font-style: normal;\n}\n","// @file\n// Blockquote styles.\n\n@use '../../../00-config' as *;\n\n$blockquote-cite-divider-color: gesso-color(ui, generic, border);\n\n%pull-quote {\n @include display-text-style(blockquote);\n background-color: gesso-grayscale(white);\n border-left: rem(units(1)) solid gesso-brand(aqua, base);\n clear: both;\n margin: 0 0 rem(gesso-spacing(3));\n padding: rem(units($theme-alert-padding-x)) 0\n rem(units($theme-alert-padding-x)) rem(units($theme-alert-padding-x));\n\n > :last-child {\n margin-bottom: 0;\n }\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(3));\n }\n}\n\n%pull-quote__cite {\n display: block;\n margin: rem(gesso-spacing(2)) 0;\n text-align: left;\n}\n\nblockquote {\n @extend %pull-quote;\n\n p {\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n\n cite {\n @extend %pull-quote__cite;\n\n em {\n border-left: 1px solid $blockquote-cite-divider-color;\n font-weight: font-weight(normal);\n margin-left: rem(gesso-spacing('05'));\n padding-left: rem(gesso-spacing(1));\n }\n }\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Preformatted text styles.\n\n@use '../../../00-config' as *;\n\npre {\n margin: 0 0 rem(gesso-spacing(2));\n overflow: auto;\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(2));\n }\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Horizontal rule styles.\n\n@use '../../../00-config' as *;\n\nhr {\n border-top: solid gesso-grayscale(gray-3);\n border-width: 1px 0 0;\n box-sizing: content-box;\n height: 0;\n margin: 0 0 rem(gesso-spacing(3));\n overflow: auto;\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(3));\n }\n}\n","// @file\n// Address element styles.\n\naddress {\n font-style: normal;\n}\n","// @file\n// Unordered list styles.\n\n@use '../../../00-config' as *;\n\nul {\n @extend %usa-list;\n list-style-type: disc;\n margin-top: 0;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n padding-left: 0;\n padding-right: 3ch;\n }\n }\n\n &:last-child {\n margin-bottom: revert;\n }\n\n ol,\n ul {\n margin-top: rem(gesso-spacing(1));\n }\n\n ul {\n list-style-type: circle;\n\n ul {\n list-style-type: square;\n }\n }\n}\n","// @file\n// Ordered list styles.\n\n@use '../../../00-config' as *;\n\nol {\n @extend %usa-list;\n margin-top: 0;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n padding-left: 0;\n padding-right: 3ch;\n }\n }\n\n &:last-child {\n margin-bottom: revert;\n }\n\n ol,\n ul {\n margin-top: rem(gesso-spacing(1));\n }\n\n ol {\n list-style-type: lower-alpha;\n\n ol {\n list-style-type: lower-roman;\n }\n }\n}\n","// @file\n// List item styles.\n\n@use '../../../00-config' as *;\n\nli {\n @extend %usa-list-item;\n max-width: unset;\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Definition list styles.\n\n@use '../../../00-config' as *;\n\ndd {\n margin: 0 0 rem(gesso-spacing(2)) 3ch;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n margin-left: 0;\n margin-right: 3ch;\n }\n }\n}\n\ndl {\n margin: 0 0 rem(gesso-spacing(2));\n}\n\n// dt {}\n","// @file\n// Table styles.\n\n@use '../../../00-config' as *;\n\ntable {\n @include usa-table();\n}\n\nthead {\n @media print {\n display: table-header-group;\n }\n}\n\ntbody {\n th {\n background-color: color('base-lightest');\n font-weight: $theme-font-weight-bold;\n }\n}\n\ntr {\n @media print {\n page-break-inside: avoid;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"button-unstyled\" as *;\n@use \"../helpers\" as *;\n@use \"../utilities\" as *;\n@use \"../typography/typeset\" as *;\n\n$table-text-color: get-color-token-from-bg(\n $bg-color: $theme-body-background-color,\n $preferred-text-token: $theme-table-text-color,\n $context: \"Table text\",\n);\n\n$table-header-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-header-background-color,\n $preferred-text-token: $theme-table-header-text-color,\n $context: \"Table header text\",\n )\n);\n\n$table-stripe-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-stripe-background-color,\n $preferred-text-token: $theme-table-stripe-text-color,\n $context: \"Table stripe text\",\n )\n);\n\n$table-sorted-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-background-color,\n $context: \"Table sorted text\",\n )\n);\n\n$table-sorted-header-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-header-background-color,\n $preferred-text-token: $theme-table-header-text-color,\n $context: \"Table sorted header text\",\n )\n);\n\n$table-sorted-stripe-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-stripe-background-color,\n $preferred-text-token: $theme-table-stripe-text-color,\n $context: \"Table sorted stripe text\",\n )\n);\n\n$table-sorted-icon-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-header-background-color,\n $preferred-text-token: $theme-table-sorted-icon-color,\n $context: \"Table sorted icon\",\n )\n);\n\n$table-unsorted-icon-color: get-color-token-from-bg(\n $bg-color: $theme-table-header-background-color,\n $preferred-text-token: $theme-table-unsorted-icon-color,\n $context: \"Table unsorted icon\",\n);\n\n\n// Shared table styles\n@mixin table-header-unsorted-styles {\n padding-right: units(5);\n position: relative;\n &::after {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-bottom-width: units(1px);\n bottom: 0;\n content: \"\";\n height: 0;\n left: 0;\n position: absolute;\n width: 100%;\n }\n}\n\n@mixin table-button-default-styles {\n @include button-unstyled;\n @include u-square(4);\n background-position: center center;\n background-size: units(3);\n color: color($theme-table-unsorted-icon-color);\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n // vertically center button within table header\n top: 50%;\n transform: translate(0, -50%);\n .usa-icon {\n @include u-square(3);\n vertical-align: middle;\n & > g {\n fill: transparent;\n }\n }\n}\n\n// The SVG in the sortable column button contains three icon shapes.\n// This CSS controls which of the shapes is 'filled' when active.\n\n@mixin table-button-unsorted-styles {\n @include table-button-default-styles;\n .usa-icon > g.unsorted {\n fill: color($table-unsorted-icon-color);\n }\n &:hover .usa-icon > g.unsorted {\n fill: color(\n next-token($table-unsorted-icon-color, \"darker\")\n )\n }\n}\n\n@mixin table-button-sorted-ascending-styles {\n @include table-button-default-styles;\n .usa-icon > g.ascending {\n fill: $table-sorted-icon-color;\n }\n}\n\n@mixin table-button-sorted-descending-styles {\n @include table-button-default-styles;\n .usa-icon > g.descending {\n fill: $table-sorted-icon-color;\n }\n}\n\n@mixin table-stacked-styles {\n thead {\n display: none;\n }\n\n th,\n td {\n border-bottom-width: 0;\n display: block;\n width: 100%;\n }\n\n tr {\n border-bottom: units(0.5) solid color($theme-table-border-color);\n border-top-width: 0;\n display: block;\n width: 100%;\n th:first-child,\n td:first-child {\n border-top-width: 0;\n }\n &:nth-child(odd) {\n td,\n th {\n background-color: inherit;\n }\n }\n\n &:first-child {\n th:first-child,\n td:first-child {\n border-top: units(0.5) solid color($theme-table-border-color);\n }\n }\n }\n\n th[data-label],\n td[data-label] {\n padding-bottom: units(1.5);\n\n &:before {\n content: attr(data-label);\n display: block;\n font-weight: fw(\"bold\");\n margin: units(-1) units(-2) units(0);\n padding: units(1.5) units(2) units(0.5);\n }\n }\n}\n\n@mixin table-stacked-header-styles {\n tr {\n td:first-child,\n th:first-child {\n @include typeset(\n $theme-body-font-family,\n $theme-h4-font-size,\n $theme-heading-line-height\n );\n background-color: color($theme-table-header-background-color);\n color: $table-header-text-color;\n font-weight: fw(\"bold\");\n padding: units(1.5) units(2);\n &:before {\n display: none;\n }\n }\n }\n}\n\n@mixin usa-table {\n @include border-box-sizing;\n @include typeset;\n border-collapse: collapse;\n border-spacing: 0;\n color: color($table-text-color);\n margin: units(2.5) 0;\n text-align: left;\n\n thead {\n th {\n background-clip: padding-box;\n color: $table-header-text-color;\n font-weight: fw(\"bold\");\n line-height: line-height(\n $theme-body-font-family,\n $theme-input-line-height\n );\n }\n\n th,\n td {\n background-color: color($theme-table-header-background-color);\n color: $table-header-text-color;\n }\n }\n tbody {\n th {\n text-align: left;\n }\n }\n th,\n td {\n background-color: color($theme-body-background-color);\n border: 1px solid color($theme-table-border-color);\n font-weight: fw(\"normal\");\n padding: units(1) units(2);\n }\n\n caption {\n @include u-font(\"body\", \"xs\");\n font-weight: fw(\"bold\");\n margin-bottom: units(1.5);\n text-align: left;\n }\n\n /* stylelint-disable selector-class-pattern */\n th[data-sortable] {\n @include table-header-unsorted-styles;\n\n &:not([aria-sort]),\n &[aria-sort=\"none\"] {\n .usa-table__header__button {\n @include table-button-unsorted-styles;\n }\n }\n\n &[aria-sort=\"descending\"],\n &[aria-sort=\"ascending\"] {\n background-color: color($theme-table-sorted-header-background-color);\n }\n\n &[aria-sort=\"descending\"] {\n .usa-table__header__button {\n @include table-button-sorted-descending-styles;\n }\n }\n\n &[aria-sort=\"ascending\"] {\n .usa-table__header__button {\n @include table-button-sorted-ascending-styles;\n }\n }\n }\n /* stylelint-enable selector-class-pattern */\n\n thead {\n th[aria-sort] {\n background-color: color($theme-table-sorted-header-background-color);\n color: $table-sorted-header-text-color;\n }\n }\n\n td[data-sort-active],\n th[data-sort-active] {\n background-color: color($theme-table-sorted-background-color);\n color: $table-sorted-text-color;\n }\n}\n\n\n@mixin usa-table--borderless {\n thead {\n th {\n background-color: transparent;\n border-top: 0;\n color: color($table-text-color);\n\n &[aria-sort] {\n color: $table-sorted-header-text-color;\n }\n }\n /* stylelint-disable selector-class-pattern */\n th[data-sortable]:not([aria-sort]) {\n .usa-table__header__button .usa-icon > g.unsorted {\n fill: color($table-text-color);\n }\n\n .usa-table__header__button:hover .usa-icon > g.unsorted {\n fill: color(\n next-token($table-text-color, \"darker\")\n );\n }\n }\n /* stylelint-enable selector-class-pattern */\n }\n\n th,\n td {\n border-left: 0;\n border-right: 0;\n }\n}\n\n@mixin usa-table--compact {\n th,\n td {\n padding: units(0.5) units(1.5);\n }\n}\n\n@mixin usa-table--striped {\n tbody {\n tr:nth-child(odd) {\n td,\n th {\n background-color: color($theme-table-stripe-background-color);\n color: $table-stripe-text-color;\n &[data-sort-active] {\n background-color: color($theme-table-sorted-stripe-background-color);\n color: $table-sorted-stripe-text-color;\n }\n }\n }\n }\n}\n\n@mixin usa-table--stacked {\n @include table-stacked-styles;\n}\n\n@mixin usa-table--stacked-header {\n @include table-stacked-styles;\n @include table-stacked-header-styles;\n}\n\n@mixin usa-table-container--scrollable {\n margin: units(2.5) 0;\n overflow-y: hidden;\n\n .usa-table {\n margin: 0;\n }\n\n td {\n white-space: nowrap;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs height\n\n@mixin u-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n height: get-uswds-value(\"height\", $value...) #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs width\n\n@mixin u-width($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n width: get-uswds-value(\"width\", $value...) #{$important};\n}\n","// @file\n// Form element styles.\n\n@use '../../../00-config' as *;\n\n// Don’t style button elements, since they’re often styled as links for\n// accessible widgets. Use the .button class in components/button.\nbutton {\n overflow: visible;\n}\n\n// datalist {}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n// form {}\n\n// Don't style button, submit, or reset elements, since they're often styled as\n// links for accessible widgets. Use the .button class in\n// partials/components/button.\ninput {\n line-height: normal;\n}\n\n// input[type='button'] {}\n// input[type='checkbox'] {}\n// input[type='color'] {}\n// input[type='date'] {}\n// input[type='datetime'] {}\n// input[type='datetime-local'] {}\n// input[type='email'] {}\n// input[type='file'] {}\n// input[type='image'] {}\n// input[type='month'] {}\n// input[type='number'] {}\n// input[type='password'] {}\n// input[type='radio'] {}\n// input[type='range'] {}\n// input[type='reset'] {}\n// input[type='search'] {}\n// input[type='submit'] {}\n// input[type='tel'] {}\n// input[type='text'] {}\n// input[type='time'] {}\n// input[type='url'] {}\n// input[type='week'] {}\n\n// label {}\n\nlegend {\n border: 0;\n box-sizing: border-box;\n color: inherit;\n display: table;\n margin: 0;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\n// meter {}\n\noptgroup {\n font-weight: font-weight(bold);\n}\n\n// option {}\n\n// output {}\n\n// progress {}\n\n// select {}\n\ntextarea {\n overflow: auto;\n}\n","// @file\n// Audio element styles.\n\naudio {\n &:not([controls]) {\n display: none;\n height: 0;\n }\n}\n","// @file\n// Canvas element styles.\n\ncanvas {\n display: inline-block;\n}\n","// @file\n// Figure element styles.\n\nfigure {\n margin: 0;\n}\n\n// figcaption {}\n","// @file\n// IMG element styles.\n\nimg {\n border: 0;\n font-style: italic; // Makes alt text stand out from surrounding text.\n height: auto;\n max-width: 100%;\n vertical-align: middle;\n\n @media print {\n max-width: 100% !important;\n page-break-inside: avoid;\n }\n}\n","// @file\n// SVG element styles.\n\nsvg {\n &:not(:root) {\n overflow: hidden;\n }\n}\n","// @file\n// Styles for a teaser.\n\n@use '../../00-config' as *;\n@use '../../02-base' as *;\n\n.teaser {\n margin-bottom: rem(gesso-spacing(3));\n\n > :last-child {\n margin-bottom: 0;\n }\n\n & + & {\n border-top: 1px solid gesso-grayscale(gray-2);\n padding-top: rem(gesso-spacing(3));\n }\n}\n\n.teaser__title {\n @extend %h3;\n margin: 0 0 rem(gesso-spacing('05'));\n}\n\n.teaser__subtitle {\n @extend %h4;\n margin: rem(gesso-spacing(1)) 0 rem(gesso-spacing('05'));\n}\n\n.teaser__metadata {\n margin: 0 0 rem(gesso-spacing('05'));\n\n > * {\n margin: 0;\n }\n}\n\n.teaser__summary {\n margin-bottom: rem(gesso-spacing('05'));\n\n > :last-child {\n margin-bottom: 0;\n }\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/css/web-area-title/web-area-title.css b/services/drupal/web/themes/epa_theme/css/web-area-title/web-area-title.css new file mode 100644 index 0000000000..d3947cefdd --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/web-area-title/web-area-title.css @@ -0,0 +1,2655 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ +/* +---------------------------------------- +Icons +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/overview/ +---------------------------------------- +*/ +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +declarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ +/* +---------------------------------------- +General colors +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ +/* +---------------------------------------- +Site +---------------------------------------- +*/ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ +/* +---------------------------------------- +Settings +---------------------------------------- +*/ +/* +---------------------------------------- +Values +---------------------------------------- +*/ +/* +---------------------------------------- +px-to-rem() +---------------------------------------- +Converts a value in px to a value in rem +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-px() +---------------------------------------- +Converts a value in rem to a value in px +---------------------------------------- +*/ +/* +---------------------------------------- +rem-to-user-em() +---------------------------------------- +Converts a value in rem to a value in +[user-settings] em for use in media +queries +---------------------------------------- +*/ +/* +---------------------------------------- +spacing-multiple() +---------------------------------------- +Converts a spacing unit multiple into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +uswds-error() +---------------------------------------- +Allow the system to pass an error as text +to test error states in unit testing +---------------------------------------- +*/ +/* +---------------------------------------- +error-not-token() +---------------------------------------- +Returns a common not-a-token error. +---------------------------------------- +*/ +/* +---------------------------------------- +get-last() +---------------------------------------- +Return the last item of a list, +Return null if the value is null +---------------------------------------- +*/ +/* +---------------------------------------- +append-important() +---------------------------------------- +Append `!important` to a list +---------------------------------------- +*/ +/* +---------------------------------------- +de-list() +---------------------------------------- +Transform a one-element list or arglist +into that single element. +---------------------------------------- +(1) => 1 +((1)) => (1) +---------------------------------------- +*/ +/* +---------------------------------------- +get-default() +---------------------------------------- +Returns the default value from a map +of project defaults +get-default("bg-color") +> $theme-body-background-color +---------------------------------------- +*/ +/* +---------------------------------------- +has-important() +---------------------------------------- +Check to see if `!important` is +being passed in a mixin's props +---------------------------------------- +*/ +/* +---------------------------------------- +map-collect() +---------------------------------------- +Collect multiple maps into a single +large map +source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe +---------------------------------------- +*/ +/* +---------------------------------------- +map-deep-get() +---------------------------------------- +@author Hugo Giraudel +@access public +@param {Map} $map - Map +@param {Arglist} $keys - Key chain +@return {*} - Desired value +---------------------------------------- +*/ +/* +---------------------------------------- +multi-cat() +---------------------------------------- +Concatenate two lists +---------------------------------------- +*/ +/* +---------------------------------------- +remove() +---------------------------------------- +Remove a value from a list +---------------------------------------- +*/ +/* +---------------------------------------- +smart-quote() +---------------------------------------- +Quotes strings +Inspects `px`, `xs`, and `xl` numbers +Leaves bools as is +---------------------------------------- +*/ +/* +---------------------------------------- +str-replace() +---------------------------------------- +Replace any substring with another +string +---------------------------------------- +*/ +/* +---------------------------------------- +str-split() +---------------------------------------- +Split a string at a given separator +and convert into a list of substrings +---------------------------------------- +*/ +/* +---------------------------------------- +strip-unit() +---------------------------------------- +Remove the unit of a length +@author Hugo Giraudel +@param {Number} $number - Number to remove unit from +@return {Number} - Unitless number +---------------------------------------- +*/ +/* +---------------------------------------- +base-to-map() +@TODO: Deprecate and delete +---------------------------------------- +Convert a single base to a USWDS +value map. + +Candidate for deprecation if we remove +isReadable +---------------------------------------- +*/ +/* +---------------------------------------- +to-number() +---------------------------------------- +Casts a string into a number +---------------------------------------- +@param {String | Number} $value - Value to be parsed +@return {Number} +---------------------------------------- +*/ +/* +---------------------------------------- +unpack() +---------------------------------------- +Create lists of single items from lists +of lists. +---------------------------------------- +(1, (2.1, 2.2), 3) --> +(1, 2.1, 2.2, 3) +---------------------------------------- +*/ +/* +---------------------------------------- +number-to-token() +---------------------------------------- +Converts an integer or numeric value +into a system value + +Ex: 0.5 --> '05' + -1px --> 'neg-1px' +---------------------------------------- +*/ +/* +---------------------------------------- +units() +---------------------------------------- +Converts a spacing unit into +the desired final units (currently rem) +---------------------------------------- +*/ +/* +---------------------------------------- +Project fonts +---------------------------------------- +Collects font settings in a map for +looping. +---------------------------------------- +*/ +/* +---------------------------------------- +Luminance ranges +---------------------------------------- +*/ +/* +---------------------------------------- +ns() +---------------------------------------- +Add a namesspace of $type if that +namespace is set to output +---------------------------------------- +*/ +/* +---------------------------------------- +get-system-color() +---------------------------------------- +Derive a system color from its +family, value, and vivid or a passed +variable that is, itself, a list +---------------------------------------- +*/ +/* +---------------------------------------- +set-theme-color() +---------------------------------------- +Derive a color from a system color token +or a hex value +---------------------------------------- +*/ +/* +---------------------------------------- +Line height +---------------------------------------- +*/ +/* +---------------------------------------- +Measure +---------------------------------------- +*/ +/* +---------------------------------------- +validate-typeface-token() +---------------------------------------- +Check to see if a typeface-token exists. +Throw an error if a passed token does +not exist in the typeface-token map. +---------------------------------------- +*/ +/* +---------------------------------------- +cap-height() +---------------------------------------- +Get the cap height of a valid typeface +---------------------------------------- +*/ +/* +---------------------------------------- +convert-to-font-type() +---------------------------------------- +Converts a font-role token into a +font-type token. Leaves font-type tokens +unchanged. +---------------------------------------- +*/ +/* +---------------------------------------- +get-font-stack() +---------------------------------------- +Get a font stack from a style- or +role-based font token. +---------------------------------------- +*/ +/* +---------------------------------------- +get-typeface-token() +---------------------------------------- +Get a typeface token from a font-type or +font-role token. +---------------------------------------- +*/ +/* +---------------------------------------- +normalize-type-scale() +---------------------------------------- +Normalizes a specific face's optical size +to a set target +---------------------------------------- +*/ +/* +---------------------------------------- +system-type-scale() +---------------------------------------- +Get a value from the system type scale +---------------------------------------- +*/ +/* +---------------------------------------- +Easing +---------------------------------------- +*/ +/* deprecated.scss + --- + Occasionally the design system will deprecate + old variables or functionality. If we replace + the old functionality with something new, this is a + place to connect the old functionality to the + new functionality, in the service of better + continuity and backwards compatibility within a + major release cycle. + + Note the USWDS version where we deprecated the + old functionality in a comment. + + Be sure to update notifications.scss. + + This file should started fresh at each + major version. +*/ +/* +---------------------------------------- +advanced-color() +---------------------------------------- +Derive a color from a color triplet: +[family], [grade], [variant] +---------------------------------------- +*/ +/* +---------------------------------------- +is-system-color-token() +---------------------------------------- +Return whether a token is a system +color token +---------------------------------------- +*/ +/* +---------------------------------------- +is-theme-color-token() +---------------------------------------- +Return whether a token is a theme +color token +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-assignment() +---------------------------------------- +Get the system token equivalent of any +theme color token +---------------------------------------- +*/ +/* +---------------------------------------- +decompose() +---------------------------------------- +Convert a color token into into a list +of form [family], [grade], [variant] +Vivid variants return "vivid" as the +variant. +If neither grade nor variant exists, +returns 'null' +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-family() +---------------------------------------- +Returns the family of a color token. +Returns: color-family +color-token-family("accent-warm-vivid") +> "accent-warm" +color-token-family("red-50v") +> "red" +color-token-variant(("red", 50, "vivid")) +> "red" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-grade() +---------------------------------------- +Returns the grade of a USWDS color token. +Returns: color-grade +color-token-grade("accent-warm") +> "root" +color-token-grade("accent-warm-vivid") +> "root" +color-token-grade("accent-warm-darker") +> "darker" +color-token-grade("red-50v") +> 50 +color-token-variant(("red", 50, "vivid")) +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-color-token() +---------------------------------------- +Returns whether a given string is a +USWDS color token. +---------------------------------------- +*/ +/* +---------------------------------------- +pow() +---------------------------------------- +Raises a unitless number to the power +of another unitless number +Includes helper functions +---------------------------------------- +*/ +/* +---------------------------------------- +Helper functions +---------------------------------------- +*/ +/* factorial() +---------------------------------------- +*/ +/* summation() +---------------------------------------- +*/ +/* exp-maclaurin() +---------------------------------------- +*/ +/* ln() +---------------------------------------- +*/ +/* +---------------------------------------- +luminance() +---------------------------------------- +Returns the luminance of `$color` as a float (between 0 and 1) +1 is pure white, 0 is pure black + +@param {Color} $color - Color +@return {Number} +@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference +---------------------------------------- +*/ +/* +---------------------------------------- +calculate-grade() +---------------------------------------- +Derive the grade equivalent any color, +even non-token colors +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-type() +---------------------------------------- +Returns the type of a color token. +Returns: "system" | "theme" +---------------------------------------- +*/ +/* +---------------------------------------- +color-token-variant() +---------------------------------------- +Returns the variant of color token. +Returns: "vivid" | false +color-token-variant("accent-warm") +> false +color-token-variant("accent-warm-vivid") +> "vivid" +color-token-variant("red-50v") +> "vivid" +color-token-variant(("red", 50, "vivid")) +> "vivid" +---------------------------------------- +*/ +/* +---------------------------------------- +magic-number() +---------------------------------------- +Returns the magic number of two color +grades. Takes numbers or color tokens. +magic-number(50, 10) +return: 40 +magic-number("red-50", "red-10") +return: 40 +---------------------------------------- +*/ +/* +---------------------------------------- +wcag-magic-number() +---------------------------------------- +Returns the magic number of a specific +wcag grade: +"AA" +"AA-Large" +"AAA" +wcag-magic-number("AA") +> 50 +---------------------------------------- +*/ +/* +---------------------------------------- +is-accessible-magic-number() +---------------------------------------- +Returns whether two grades achieve +specified target color contrast +Returns: true | false +is-accessible-magic-number(10, 50, "AA") +> false +is-accessible-magic-number(10, 60, "AA") +> true +---------------------------------------- +*/ +/* +---------------------------------------- +next-token() +---------------------------------------- +Returns next "darker" or "lighter" color +token of the same token type and variant. +Returns: color-token | false +next-token("accent-warm", "lighter") +> "accent-warm-light" +next-token("gray-10", "lighter") +> "gray-5" +next-token("gray-5", "lighter") +> "white" +next-token("white", "lighter") +> false +next-token("red-50v", "darker") +> "red-60v" +next-token("red-50", "darker") +> "red-60" +next-token("red-80v", "darker") +> "red-90" +next-token("red-90", "darker") +> "black" +next-token("white", "darker") +> "gray-5" +next-token("black", "lighter") +> "gray-90" +---------------------------------------- +*/ +/* +---------------------------------------- +get-link-tokens-from-bg() +---------------------------------------- +Get accessible link colors for a given +background color +returns: link-token, hover-token +get-link-tokens-from-bg( + "black", + "red-60", + "red-10", + "AA") +> "red-10", "red-5" +get-link-tokens-from-bg( + "black", + "red-60v", + "red-10v", + "AA-large") +> "red-60v", "red-50v" +get-link-tokens-from-bg( + "black", + "red-5v", + "red-60v", + "AA") +> "red-5v", "white" +get-link-tokens-from-bg( + "black", + "white", + "red-60v", + "AA") +> "white", "white" +---------------------------------------- +*/ +/* +---------------------------------------- +test-colors() +---------------------------------------- +Check to see if all system colors +fall between the proper relative +luminance range for their grade. +Has a couple quirks, as the luminance() +function returns slightly different +results than expected. +---------------------------------------- +*/ +/* +---------------------------------------- +columns() +---------------------------------------- +outputs a grid-col number based on +the number of desired columns in the +12-column grid + +Ex: columns(2) --> 6 + grid-col(columns(2)) +---------------------------------------- +*/ +/* +---------------------------------------- +USWDS Properties +---------------------------------------- +*/ +/* +---------------------------------------- +get-uswds-value() +---------------------------------------- +Finds and outputs a value from the +USWDS standard values. + +Used to build other standard utility +functions and mixins. +---------------------------------------- +*/ +/* +---------------------------------------- +get-standard-values() +---------------------------------------- +Gets a map of USWDS standard values +for a property +---------------------------------------- +*/ +/* +---------------------------------------- +color() +---------------------------------------- +Derive a color from a color shortcode +---------------------------------------- +*/ +/* +---------------------------------------- +border-radius() +---------------------------------------- +Get a border-radius from the system +border-radii +---------------------------------------- +*/ +/* +---------------------------------------- +font-weight() +fw() +---------------------------------------- +Get a font-weight value from the +system font-weight +---------------------------------------- +*/ +/* +---------------------------------------- +feature() +---------------------------------------- +Gets a valid USWDS font feature setting +---------------------------------------- +*/ +/* +---------------------------------------- +flex() +---------------------------------------- +Gets a valid USWDS flex value +---------------------------------------- +*/ +/* +---------------------------------------- +font-family() +family() +---------------------------------------- +Get a font-family stack from a +role-based or type-based font family +---------------------------------------- +*/ +/* +---------------------------------------- +letter-spacing() +ls() +---------------------------------------- +Get a letter-spacing value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +measure() +---------------------------------------- +Gets a valid USWDS reading line length +---------------------------------------- +*/ +/* +---------------------------------------- +opacity() +---------------------------------------- +Get an opacity from the system +opacities +---------------------------------------- +*/ +/* +---------------------------------------- +order() +---------------------------------------- +Get an order value from the +system orders +---------------------------------------- +*/ +/* +---------------------------------------- +radius() +---------------------------------------- +Get a border-radius value from the +system letter-spacing +---------------------------------------- +*/ +/* +---------------------------------------- +font-size() +---------------------------------------- +Get type scale value from a [family] and +[scale] +---------------------------------------- +*/ +/* +---------------------------------------- +z-index() +z() +---------------------------------------- +Get a z-index value from the +system z-index +---------------------------------------- +*/ +/* +---------------------------------------- +utility-font() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +Not the public-facing function. +Used for building the utilities and +withholds certain errors. +---------------------------------------- +*/ +/* +---------------------------------------- +family() +---------------------------------------- +Get a font-family stack +---------------------------------------- +*/ +/* +---------------------------------------- +size() +---------------------------------------- +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +font() +---------------------------------------- +Get a font-family stack +AND +Get a normalized font-size in rem from +a family and a type size in either +system scale or project scale +---------------------------------------- +*/ +/* +---------------------------------------- +typeset() +---------------------------------------- +Sets: +- family +- size +- line-height +---------------------------------------- +*/ +/* stylelint-disable max-nesting-depth */ +/* +---------------------------------------- +@render-pseudoclass +---------------------------------------- +Build a pseucoclass utiliy from values +calculated in the @render-utilities-in +loop +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utility +---------------------------------------- +Build a utility from values calculated +in the @render-utilities-in loop +---------------------------------------- +TODO: Determine the proper use of +unquote() in the following. Changed to +account for a 'interpolation near +operators will be simplified in a +future version of Sass' warning. +---------------------------------------- +*/ +/* +---------------------------------------- +@render-utilities-in +---------------------------------------- +The master loop that sets the building +blocks of utilities from the values +in individual rule settings and loops +through all possible variants +---------------------------------------- +*/ +/* stylelint-enable */ +/* notifications.scss + --- + Adds a notification at the top of each USWDS + compile. Use this file for important notifications + and updates to the design system. + + This file should started fresh at each + major version. + +*/ +/* prettier-ignore */ +/* prettier-ignore */ +ol, ul { + margin-bottom: 1em; + margin-top: 1em; + line-height: 1.5; + padding-left: 3ch; +} +ol:last-child, ul:last-child { + margin-bottom: 0; +} +ol ul, ul ul, +ol ol, +ul ol { + margin-top: 0.25em; +} + +li { + margin-bottom: 0.25em; + max-width: 68ex; +} +li:last-child { + margin-bottom: 0; +} + +/* stylelint-disable */ +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format("truetype"); +} +@font-face { + font-family: "Roboto Mono Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Source Sans Pro Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 300; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 400; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); +} +@font-face { + font-family: "Merriweather Web"; + font-style: italic; + font-weight: 700; + font-display: fallback; + src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); +} +/* stylelint-enable */ +.usa-button { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 0.9; + color: white; + background-color: #005ea2; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-radius: 0.25rem; + cursor: pointer; + display: inline-block; + font-weight: 700; + margin-right: 0.5rem; + padding: 0.75rem 1.25rem; + text-align: center; + text-decoration: none; + width: 100%; +} +@media all and (min-width: 30em) { + .usa-button { + width: auto; + } +} +.usa-button:visited { + color: white; +} +.usa-button:hover, .usa-button.usa-button--hover { + color: white; + background-color: #1a4480; + border-bottom: 0; + text-decoration: none; +} +.usa-button:active, .usa-button.usa-button--active { + color: white; + background-color: #162e51; +} +.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { + outline-offset: 0.25rem; +} +.usa-button:disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--accent-cool { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:visited { + color: #1b1b1b; + background-color: #00bde3; +} +.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { + color: #1b1b1b; + background-color: #28a0cb; +} +.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { + color: white; + background-color: #07648d; +} + +.usa-button--accent-warm { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:visited { + color: #1b1b1b; + background-color: #fa9441; +} +.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { + color: white; + background-color: #c05600; +} +.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { + color: white; + background-color: #775540; +} + +.usa-button--outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #005ea2; + box-shadow: inset 0 0 0 2px #005ea2; + color: #005ea2; +} +.usa-button--outline:visited { + color: #005ea2; +} +.usa-button--outline:hover, .usa-button--outline.usa-button--hover { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #1a4480; + box-shadow: inset 0 0 0 2px #1a4480; + color: #1a4480; +} +.usa-button--outline:active, .usa-button--outline.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #162e51; + box-shadow: inset 0 0 0 2px #162e51; + color: #162e51; +} +.usa-button--outline.usa-button--inverse { + -webkit-box-shadow: inset 0 0 0 2px #dfe1e2; + box-shadow: inset 0 0 0 2px #dfe1e2; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { + -webkit-box-shadow: inset 0 0 0 2px #f0f0f0; + box-shadow: inset 0 0 0 2px #f0f0f0; + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px white; + box-shadow: inset 0 0 0 2px white; + color: white; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: #162e51; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { + color: #dfe1e2; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { + color: #f0f0f0; +} +.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { + color: white; +} + +.usa-button--base { + color: white; + background-color: #71767a; +} +.usa-button--base:hover, .usa-button--base.usa-button--hover { + color: white; + background-color: #565c65; +} +.usa-button--base:active, .usa-button--base.usa-button--active { + color: white; + background-color: #3d4551; +} + +.usa-button--secondary { + color: white; + background-color: #d83933; +} +.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { + color: white; + background-color: #b50909; +} +.usa-button--secondary:active, .usa-button--secondary.usa-button--active { + color: white; + background-color: #8b0a03; +} + +.usa-button--big { + border-radius: 0.25rem; + font-size: 1.46rem; + padding: 1rem 1.5rem; +} + +.usa-button--disabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: #c9c9c9; + color: white; +} +.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { + background-color: #c9c9c9; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.usa-button--outline-disabled, +.usa-button--outline-inverse-disabled, +.usa-button--outline:disabled, +.usa-button--outline-inverse:disabled, +.usa-button--outline-inverse:disabled { + background-color: transparent; +} +.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, +.usa-button--outline-inverse-disabled:hover, +.usa-button--outline-inverse-disabled.usa-button--hover, +.usa-button--outline-inverse-disabled:active, +.usa-button--outline-inverse-disabled.usa-button--active, +.usa-button--outline-inverse-disabled:focus, +.usa-button--outline-inverse-disabled.usa-focus, +.usa-button--outline:disabled:hover, +.usa-button--outline:disabled.usa-button--hover, +.usa-button--outline:disabled:active, +.usa-button--outline:disabled.usa-button--active, +.usa-button--outline:disabled:focus, +.usa-button--outline:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus, +.usa-button--outline-inverse:disabled:hover, +.usa-button--outline-inverse:disabled.usa-button--hover, +.usa-button--outline-inverse:disabled:active, +.usa-button--outline-inverse:disabled.usa-button--active, +.usa-button--outline-inverse:disabled:focus, +.usa-button--outline-inverse:disabled.usa-focus { + background-color: transparent; + border: 0; +} + +.usa-button--outline-disabled, +.usa-button--outline:disabled { + -webkit-box-shadow: inset 0 0 0 2px #c9c9c9; + box-shadow: inset 0 0 0 2px #c9c9c9; + color: #c9c9c9; +} +.usa-button--outline-disabled.usa-button--inverse, +.usa-button--outline:disabled.usa-button--inverse { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 2px #71767a; + box-shadow: inset 0 0 0 2px #71767a; + color: #71767a; +} + +.usa-button--unstyled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; +} +.usa-button--unstyled:visited { + color: #54278f; +} +.usa-button--unstyled:hover { + color: #1a4480; +} +.usa-button--unstyled:active { + color: #162e51; +} +.usa-button--unstyled:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { + color: #c9c9c9; +} +.usa-button--unstyled.usa-button--hover { + color: #1a4480; +} +.usa-button--unstyled.usa-button--active { + color: #162e51; +} + +* { + -webkit-transition-duration: 200ms; + transition-duration: 200ms; + -webkit-transition-property: background-color, border-color, color, opacity, text-shadow, -webkit-box-shadow, -webkit-transform; + transition-property: background-color, border-color, color, opacity, text-shadow, -webkit-box-shadow, -webkit-transform; + transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform; + transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform, -webkit-box-shadow, -webkit-transform; + -webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + +@media print { + * { + background-color: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #000 !important; + text-shadow: none !important; + } + + @page { + margin: 2cm; + } +} +[id] { + scroll-margin-top: 1em; +} + +html { + -webkit-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + -webkit-font-kerning: normal; + font-kerning: normal; + font-size: 100%; + min-height: 100%; +} + +body { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 1.5; + background-color: #fff; + color: #1b1b1b; + margin: 0; + padding: 0; + word-wrap: break-word; +} +body.has-open-mobile-menu { + overflow: hidden; + -webkit-overflow-scrolling: touch; +} + +@media print { + nav { + display: none; + } +} + +summary { + display: list-item; +} + +iframe { + border: 0; + max-width: 100%; +} +@media print { + iframe { + display: none; + } +} + +h6, +.h6, h5, +.h5, h4, +.h4, h3, +.h3, +.web-area-title, h2, +.h2, h1 { + margin-bottom: 0; + margin-top: 0; + clear: none; + margin-bottom: 1rem; + clear: none; + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; + text-rendering: optimizeLegibility; +} +* + h6, +* + .h6, * + h5, +* + .h5, * + h4, +* + .h4, * + h3, +* + .h3, +* + .web-area-title, * + h2, +* + .h2, * + h1 { + margin-top: 1em; +} +@media print { + h6, +.h6, h5, +.h5, h4, +.h4, h3, +.h3, +.web-area-title, h2, +.h2, h1 { + orphans: 3; + page-break-after: avoid; + widows: 3; + } + h6::after, +.h6::after, h5::after, +.h5::after, h4::after, +.h4::after, h3::after, +.h3::after, +.web-area-title::after, h2::after, +.h2::after, h1::after { + display: inline-block; + } +} + +h1 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 2.44rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h1 { + font-size: 1.95rem; + } +} + +h2, +.h2 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.95rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h2, +.h2 { + font-size: 1.34rem; + } +} + +h3, +.h3, +.web-area-title { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.34rem; + font-weight: 700; + line-height: 1.2; +} +@media (min-width: max-width 40rem) { + h3, +.h3, +.web-area-title { + font-size: 1.1rem; + } +} + +h4, +.h4 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 0.98rem; + font-weight: 700; + line-height: 1.2; +} + +h5, +.h5 { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 0.91rem; + font-weight: 700; + line-height: 1.2; +} + +h6, +.h6 { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 0.87rem; + font-weight: normal; + letter-spacing: 0.025em; + line-height: 1.1; + text-transform: uppercase; +} + +p { + line-height: 1.5; + margin-bottom: 1rem; + margin-top: 0; +} +@media print { + p { + orphans: 3; + widows: 3; + } +} +p:empty { + margin: 0 !important; +} + +a { + background-color: transparent; + color: #005ea2; + -webkit-text-decoration-skip: objects; +} +a:visited { + color: #54278f; +} +a:hover, a:focus { + color: #1a4480; +} +a:active { + color: #162e51; +} +@media print { + a, a:visited { + text-decoration: none; + } + a[href]::after { + content: " <" attr(href) ">"; + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 10pt; + font-weight: normal; + text-transform: lowercase; + } + a[href^="/"]::after { + content: " "; + } + a[href^="javascript:"]::after, a[href^="mailto:"]::after, a[href^="tel:"]::after, a[href^="#"]::after, a[href*="?"]::after { + content: ""; + } +} + +abbr[title] { + border-bottom: 1px dotted; + text-decoration: none; +} +@media (min-width: max-width 40rem) { + abbr[title] { + border-bottom: 0; + } + abbr[title]::after { + content: " (" attr(title) ")"; + } +} +abbr:hover { + cursor: help; +} +@media print { + abbr[title] { + border-bottom: 0; + } + abbr[title]::after { + content: " (" attr(title) ")"; + } +} + +cite { + color: #565c65; + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 0.93rem; + font-style: normal; + font-weight: normal; + letter-spacing: 0.025em; + line-height: 1.6; +} + +dfn { + font-style: normal; +} + +ins { + text-decoration: none; +} + +mark { + background: #ff0; + color: #000; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +var { + font-style: normal; +} + +blockquote { + font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 1.1rem; + font-weight: normal; + line-height: 1.7; + background-color: #fff; + border-left: 0.5rem solid #00bde3; + clear: both; + margin: 0 0 1.5rem; + padding: 1.25rem 0 1.25rem 1.25rem; +} +blockquote > :last-child { + margin-bottom: 0; +} +* + blockquote { + margin-top: 1.5rem; +} + +blockquote cite { + display: block; + margin: 1rem 0; + text-align: left; +} + +blockquote p { + color: inherit; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} +blockquote cite em { + border-left: 1px solid #71767a; + font-weight: normal; + margin-left: 0.25rem; + padding-left: 0.5rem; +} +@media print { + blockquote { + page-break-inside: avoid; + } +} + +pre { + margin: 0 0 1rem; + overflow: auto; +} +* + pre { + margin-top: 1rem; +} +@media print { + pre { + page-break-inside: avoid; + } +} + +hr { + border-top: solid #a9aeb1; + border-width: 1px 0 0; + -webkit-box-sizing: content-box; + box-sizing: content-box; + height: 0; + margin: 0 0 1.5rem; + overflow: auto; +} +* + hr { + margin-top: 1.5rem; +} + +address { + font-style: normal; +} + +ul { + list-style-type: disc; + margin-top: 0; +} +[dir=rtl] ul { + padding-left: 0; + padding-right: 3ch; +} +ul:last-child { + margin-bottom: revert; +} +ul ol, +ul ul { + margin-top: 0.5rem; +} +ul ul { + list-style-type: circle; +} +ul ul ul { + list-style-type: square; +} + +ol { + margin-top: 0; +} +[dir=rtl] ol { + padding-left: 0; + padding-right: 3ch; +} +ol:last-child { + margin-bottom: revert; +} +ol ol, +ol ul { + margin-top: 0.5rem; +} +ol ol { + list-style-type: lower-alpha; +} +ol ol ol { + list-style-type: lower-roman; +} + +li { + max-width: unset; +} +@media print { + li { + page-break-inside: avoid; + } +} + +dd { + margin: 0 0 1rem 3ch; +} +[dir=rtl] dd { + margin-left: 0; + margin-right: 3ch; +} + +dl { + margin: 0 0 1rem; +} + +table { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1.06rem; + line-height: 1.5; + border-collapse: collapse; + border-spacing: 0; + color: #1b1b1b; + margin: 1.25rem 0; + text-align: left; + /* stylelint-disable selector-class-pattern */ + /* stylelint-enable selector-class-pattern */ +} +table thead th { + background-clip: padding-box; + color: #1b1b1b; + font-weight: 700; + line-height: 1.3; +} +table thead th, +table thead td { + background-color: #dfe1e2; + color: #1b1b1b; +} +table tbody th { + text-align: left; +} +table th, +table td { + background-color: white; + border: 1px solid #1b1b1b; + font-weight: normal; + padding: 0.5rem 1rem; +} +table caption { + font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans; + font-size: 1rem; + font-weight: 700; + margin-bottom: 0.75rem; + text-align: left; +} +table th[data-sortable] { + padding-right: 2.5rem; + position: relative; +} +table th[data-sortable]::after { + border-bottom-color: transparent; + border-bottom-style: solid; + border-bottom-width: 1px; + bottom: 0; + content: ""; + height: 0; + left: 0; + position: absolute; + width: 100%; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button, table th[data-sortable][aria-sort=none] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:visited, table th[data-sortable][aria-sort=none] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g.unsorted { + fill: #1b1b1b; +} +table th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover .usa-icon > g.unsorted { + fill: black; +} +table th[data-sortable][aria-sort=descending], table th[data-sortable][aria-sort=ascending] { + background-color: #97d4ea; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g.descending { + fill: #1b1b1b; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + color: #005ea2; + text-decoration: underline; + background-color: transparent; + border: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + margin: 0; + padding: 0; + text-align: left; + height: 2rem; + width: 2rem; + background-position: center center; + background-size: 1.5rem; + color: #71767a; + cursor: pointer; + display: inline-block; + margin: 0; + position: absolute; + right: 0.25rem; + text-align: center; + text-decoration: none; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:visited { + color: #54278f; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active { + color: #162e51; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:focus { + outline: 0.25rem solid #2491ff; + outline-offset: 0; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled { + -moz-osx-font-smoothing: inherit; + -webkit-font-smoothing: inherit; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: underline; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled { + color: #c9c9c9; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover { + color: #1a4480; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active { + color: #162e51; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon { + height: 1.5rem; + width: 1.5rem; + vertical-align: middle; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g { + fill: transparent; +} +table th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g.ascending { + fill: #1b1b1b; +} +table thead th[aria-sort] { + background-color: #97d4ea; + color: #1b1b1b; +} +table td[data-sort-active], +table th[data-sort-active] { + background-color: #e1f3f8; + color: #1b1b1b; +} + +@media print { + thead { + display: table-header-group; + } +} + +tbody th { + background-color: #f0f0f0; + font-weight: 700; +} + +@media print { + tr { + page-break-inside: avoid; + } +} + +button { + overflow: visible; +} + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +input { + line-height: normal; +} + +legend { + border: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: inherit; + display: table; + margin: 0; + max-width: 100%; + padding: 0; + white-space: normal; +} + +optgroup { + font-weight: 700; +} + +textarea { + overflow: auto; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +canvas { + display: inline-block; +} + +figure { + margin: 0; +} + +img { + border: 0; + font-style: italic; + height: auto; + max-width: 100%; + vertical-align: middle; +} +@media print { + img { + max-width: 100% !important; + page-break-inside: avoid; + } +} + +svg:not(:root) { + overflow: hidden; +} + +.web-area-title { + margin: 0; +} +/*# sourceMappingURL=web-area-title.css.map */ diff --git a/services/drupal/web/themes/epa_theme/css/web-area-title/web-area-title.css.map b/services/drupal/web/themes/epa_theme/css/web-area-title/web-area-title.css.map new file mode 100644 index 0000000000..3b54c6dcfd --- /dev/null +++ b/services/drupal/web/themes/epa_theme/css/web-area-title/web-area-title.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-general.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-typography.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-components.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-spacing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/settings/_settings-utilities.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/px-to-rem.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-px.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/spacing-multiple.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/error-not-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-last.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/append-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/de-list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/get-default.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/has-important.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-collect.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/map-deep-get.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/multi-cat.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/remove.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/smart-quote.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-replace.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/str-split.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/strip-unit.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-map.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/to-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/general/unpack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/number-to-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/units/units.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/font-type-tokens.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/luminance-grade-ranges.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/ns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-system-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/set-theme-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/tokens/font/measure.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/validate-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/cap-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/convert-to-font-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-font-stack.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/get-typeface-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/normalize-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/font/system-type-scale.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/variables/project-easing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/advanced-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-system-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-theme-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-assignment.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/decompose-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-family.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/math/pow.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/luminance.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/calculate-grade.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-type.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/color-token-variant.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/wcag-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-accessible-magic-number.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/next-token.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/test-color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/grid/columns.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_properties.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-uswds-value.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/output/get-standard-values.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/color.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/etc.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/utilities/utility-font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/_utility-builder.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/_notifications.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/placeholders/_list.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_margin.scss","web-area-title/web-area-title.css","../../../node_modules/@uswds/uswds/packages/uswds-fonts/src/styles/_font-face.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/font-face.scss","../../../node_modules/@uswds/uswds/packages/usa-button/src/styles/_usa-button.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-from-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-text-and-bg.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/at-media.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-knockout-font-smoothing.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/focus-outline.scss","../02-base/02-html-elements/00-universal/_universal.scss","../02-base/02-html-elements/01-html/_html.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/add-kerning.scss","../02-base/02-html-elements/02-body/_body.scss","../02-base/02-html-elements/10-nav/_nav.scss","../02-base/02-html-elements/11-details/_details.scss","../02-base/02-html-elements/12-iframe/_iframe.scss","../02-base/02-html-elements/13-headings/_headings.scss","../00-config/01-mixins/uswds-overrides/_mixins.uswds.typography.scss","../00-config/01-mixins/_mixins.display-text-style.scss","../00-config/01-mixins/_mixins.breakpoint.scss","../02-base/02-html-elements/14-paragraph/_paragraph.scss","../02-base/02-html-elements/15-inline-elements/_inline-elements.scss","../02-base/02-html-elements/16-blockquote/_blockquote.scss","../02-base/02-html-elements/17-preformatted-text/_preformatted-text.scss","../02-base/02-html-elements/18-horizontal-rule/_horizontal-rule.scss","../02-base/02-html-elements/19-address/_address.scss","../02-base/02-html-elements/20-unordered-list/_unordered-list.scss","../02-base/02-html-elements/21-ordered-list/_ordered-list.scss","../02-base/02-html-elements/22-list-item/_list-item.scss","../02-base/02-html-elements/23-definition-list/_definition-list.scss","../02-base/02-html-elements/24-table/_table.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_height.scss","../../../node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_width.scss","../02-base/02-html-elements/25-forms/_forms.scss","../02-base/02-html-elements/26-media/_audio.scss","../02-base/02-html-elements/26-media/_canvas.scss","../02-base/02-html-elements/26-media/_figure.scss","../02-base/02-html-elements/26-media/_img.scss","../02-base/02-html-elements/26-media/_svg.scss","web-area-title/web-area-title.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAcA;;;;CAAA;AAiBA;;;;;;;;;;;CAAA;AAeA;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAYA;;;;CAAA;AAWA;;;;CAAA;AC3GA;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;CAAA;AAkBA;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqDA;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiEA;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;CAAA;AAqBA;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;CAAA;AAmBA;;;;CAAA;AA2DA;;;;CAAA;AAgDA;;;;CAAA;AC5HA;;;;;;;;;;;;;;;CAAA;ACFA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;CAAA;AAgBA;;;;CAAA;ACjFA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AA+BA;;;;;;;;;;CAAA;AAcA;;;;CAAA;AAugBA;;;;CAAA;ACrkBA;;;;;;CAAA;ACHA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACEA;;;;;;;CAAA;ACCA;;;;;;;CAAA;ACHA;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;CAAA;ACAA;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACMA;;;;;;;;CAAA;AA8BA;;;;CAAA;AAMA;;CAAA;AAkBA;;CAAA;AAaA;;CAAA;AAyBA;;CAAA;AClGA;;;;;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACQA;;;;;;;;;;;CAAA;ACJA;;;;;;;;;;;CAAA;ACJA;;;;CAAA;ACUA;;;;;;;;;;CAAA;ACPA;;;;;;;CAAA;ACHA;;;;;;CAAA;ACWA;;;;;;;CAAA;AAoBA;;;;;;;;CAAA;AAqBA;;;;;;CAAA;AAeA;;;;;;CAAA;AAeA;;;;;;;;CAAA;AAyBA;;;;;;;;CAAA;AA8BA;;;;;;CAAA;AAeA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgBA;;;;;;;CAAA;AAgDA;;;;;;;;CAAA;AChPA;;;;;;;;;;;;CAAA;ACNA;;;;;;CAAA;AAYA;;;;;;;;CAAA;AAcA;;;;;;;;;;CAAA;ACpBA;;;;;;;;;CAAA;ACRA,wCAAA;AAaA;;;;;;;;CAAA;AAmCA;;;;;;;;;;;;;CAAA;AA8GA;;;;;;;;;CAAA;AA2NA,qBAAA;ACzXA;;;;;;;;;CAAA;AAaA,oBAAA;AAWA,oBAAA;ACpBA;ECiCI,kBAAA;EACA,eAAA;EDhCF,gBAAA;EACA,iBAAA;AEk1CF;AFh1CE;EACE,gBAAA;AEk1CJ;AF/0CE;;;EAEE,kBAAA;AEk1CJ;;AF90CA;EACE,qBAAA;EACA,eAAA;AEi1CF;AF/0CE;EACE,gBAAA;AEi1CJ;;ACz2CA,sBAAA;ACcE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AF+1CJ;AEp2CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,4OAAA;AFs2CJ;AE32CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AF62CJ;AEl3CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFo3CJ;AEz3CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;AF23CJ;AEh4CE;EACE,8BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFk4CJ;AEv4CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;AFy4CJ;AE94CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,2PAAA;AFg5CJ;AEr5CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFu5CJ;AE55CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,uQAAA;AF85CJ;AEn6CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,wPAAA;AFq6CJ;AE16CE;EACE,kCAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,oQAAA;AF46CJ;AEj7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,mOAAA;AFm7CJ;AEx7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,yOAAA;AF07CJ;AE/7CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,gOAAA;AFi8CJ;AEt8CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,qPAAA;AFw8CJ;AE78CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,sOAAA;AF+8CJ;AEp9CE;EACE,+BAsBM;EArBN,kBAAA;EACA,gBAuBM;EAtBN,sBAAA;EACA,kPAAA;AFs9CJ;AC19CA,qBAAA;AEPA;ETiCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;ECGA,YAAA;ECIA,yBAAA;EHZA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,SAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;EACA,wBAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;AHs+CF;AO1+CI;EJVJ;IAiBI,WAAA;EHu+CF;AACF;AGr+CE;EACE,YAAA;AHu+CJ;AGp+CE;EEZA,YAAA;ECIA,yBAAA;EHWE,gBAAA;EACA,qBAAA;AHs+CJ;AGn+CE;EEnBA,YAAA;ECIA,yBAAA;ANs/CF;AGl+CE;EAEE,uBAAA;AHm+CJ;AGh+CE;EKhDA,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;ATihDF;AS/gDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;AT4gDJ;;AGt+CA;EElCE,cAAA;ECIA,yBAAA;ANygDF;AGx+CE;EErCA,cAAA;ECIA,yBAAA;AN6gDF;AGx+CE;EEzCA,cAAA;ECIA,yBAAA;ANihDF;AGv+CE;EE9CA,YAAA;ECIA,yBAAA;ANqhDF;;AGr+CA;EEpDE,cAAA;ECIA,yBAAA;AN0hDF;AGv+CE;EEvDA,cAAA;ECIA,yBAAA;AN8hDF;AGv+CE;EE3DA,YAAA;ECIA,yBAAA;ANkiDF;AGt+CE;EEhEA,YAAA;ECIA,yBAAA;ANsiDF;;AGp+CA;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHu+CF;AGr+CE;EACE,cAAA;AHu+CJ;AGp+CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHq+CJ;AGl+CE;EAEE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHm+CJ;AGh+CE;EAKE,2CAAA;UAAA,mCAAA;EACA,cAAA;AH89CJ;AG59CI;EACE,cAAA;AH89CN;AG39CI;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AH49CN;AGz9CI;EAEE,6BAAA;EACA,yCAAA;UAAA,iCAAA;EACA,YAAA;AH09CN;AGv9CI;EKpIF,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EP2HI,cAAA;AHo+CN;AL1iDE;EACE,cAAA;AK4iDJ;ALziDE;EACE,cAAA;AK2iDJ;ALxiDE;EACE,cAAA;AK0iDJ;ALviDE;EgBpEA,8BAAA;EACA,iBAAA;AX8mDF;AU1mDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV4lDJ;AUzlDE;EAEE,cAAA;AV0lDJ;AUvlDE;EACE,cAAA;AVylDJ;AUtlDE;EACE,cAAA;AVwlDJ;AG//CM;EACE,cAAA;AHigDR;AG9/CM;EAEE,cAAA;AH+/CR;AG5/CM;EAEE,YAAA;AH6/CR;;AGv/CA;EE3IE,YAAA;ECIA,yBAAA;ANmoDF;AGz/CE;EE9IA,YAAA;ECIA,yBAAA;ANuoDF;AGx/CE;EEnJA,YAAA;ECIA,yBAAA;AN2oDF;;AGt/CA;EEzJE,YAAA;ECIA,yBAAA;ANgpDF;AGx/CE;EE5JA,YAAA;ECIA,yBAAA;ANopDF;AGv/CE;EEjKA,YAAA;ECIA,yBAAA;ANwpDF;;AGr/CA;EACE,sBAAA;EACA,kBAAA;EACA,oBAAA;AHw/CF;;AGr/CA;EKhME,kCAAA;EACA,mCAAA;ECGA,yBAAA;EACA,YAAA;ATurDF;ASrrDE;EAME,yBAAA;EACA,SAAA;EACA,wBAAA;UAAA,gBAAA;ATkrDJ;;AG7/CA;;;;;EAKE,6BAAA;AHggDF;AG9/CE;;;;;;;;;;;;;;;;;;;;;;;;;EAME,6BAAA;EACA,SAAA;AHmhDJ;;AG/gDA;;EAEE,2CAAA;UAAA,mCAAA;EACA,cAAA;AHkhDF;AGhhDE;;EACE,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,cAAA;AHmhDJ;;AG/gDA;EK7NE,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;AVgvDF;AL3rDE;EACE,cAAA;AK6rDJ;AL1rDE;EACE,cAAA;AK4rDJ;ALzrDE;EACE,cAAA;AK2rDJ;ALxrDE;EgBpEA,8BAAA;EACA,iBAAA;AX+vDF;AU3vDE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV6uDJ;AU1uDE;EAEE,cAAA;AV2uDJ;AUxuDE;EACE,cAAA;AV0uDJ;AUvuDE;EACE,cAAA;AVyuDJ;;AYzxDA;EACE,kCAAA;UAAA,0BAAA;EACA,+HAAA;EAAA,uHAAA;EAAA,uGAAA;EAAA,8IAAA;EAEA,8DAAA;UAAA,sDAAA;AZ2xDF;;AYxxDA;EACE;IACE,wCAAA;IACA,mCAAA;YAAA,2BAAA;IACA,sBAAA;IACA,4BAAA;EZ2xDF;;EYxxDA;IACE,WAAA;EZ2xDF;AACF;AYxxDA;EACE,sBAAA;AZ0xDF;;Aa9yDA;ECLE,uCAAA;UAAA,+BAAA;EACA,4BAAA;UAAA,oBAAA;EDMA,eAAA;EACA,gBAAA;AbkzDF;;AetzDA;ErBoCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;EWVA,sBAAA;EACA,cAAA;EACA,SAAA;EACA,UAAA;EACA,qBAAA;Af2zDF;AexzDE;EACE,gBAAA;EACA,iCAAA;Af0zDJ;;AgBt0DE;EADF;IAEI,aAAA;EhB00DF;AACF;;AiB30DA;EACE,kBAAA;AjB80DF;;AkBj1DA;EACE,SAAA;EACA,eAAA;AlBo1DF;AkBl1DE;EAJF;IAKI,aAAA;ElBq1DF;AACF;;AmBz1DA;;;;;;;EpBgCI,gBAAA;EACA,aAAA;EqB/BF,WAAA;EACA,mBAAA;EDDA,WAAA;EACA,qBAAA;MAAA,iBAAA;UAAA,aAAA;EACA,kCAAA;AnBq2DF;AoBp2DE;;;;;;;EACE,eAAA;ApB42DJ;AmB52DE;EANF;;;;;;;IAOI,UAAA;IACA,uBAAA;IACA,SAAA;EnBq3DF;EmBn3DE;;;;;;;IACE,qBAAA;EnB23DJ;AACF;;AmBv3DA;EETM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBu4DN;AsBt4DE;EHQF;IAMI,kBAAA;EnB43DF;AACF;;AmBz3DA;;EEnBM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBo5DN;AsBn5DE;EHkBF;;IAOI,kBAAA;EnB+3DF;AACF;;AmB53DA;;;EE9BM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBm6DN;AsBl6DE;EH6BF;;;IAOI,iBAAA;EnBo4DF;AACF;;AmBj4DA;;EEzCM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArBk7DN;;AmBl4DA;;EEhDM,wRAAA;EAFA,kBAAA;EAEA,gBAAA;EAAA,gBAAA;ArB07DN;;AmBn4DA;;EEvDM,kRAAA;EAFA,kBAAA;EAEA,mBAAA;EAAA,uBAAA;EAAA,gBAAA;EAAA,yBAAA;ArBo8DN;;AuB58DA;EHWE,gBAAA;EACA,mBAAA;EACA,aAAA;ApBq8DF;AuB/8DE;EAHF;IAII,UAAA;IACA,SAAA;EvBk9DF;AACF;AuB98DI;EACE,oBAAA;AvBg9DN;;AwB39DA;EACE,6BAAA;EACA,cAAA;EACA,qCAAA;AxB89DF;AwB59DE;EACE,cAAA;AxB89DJ;AwB39DE;EAEE,cAAA;AxB49DJ;AwBz9DE;EACE,cAAA;AxB29DJ;AwBx9DE;EACE;IAEE,qBAAA;ExBy9DJ;EwBt9DE;IACE,4BAAA;IACA,kRAAA;IACA,eAAA;IACA,mBAAA;IACA,yBAAA;ExBw9DJ;EwBr9DE;IACE,2CAAA;ExBu9DJ;EwBp9DE;IAKE,WAAA;ExBk9DJ;AACF;;AwB78DE;EACE,yBAAA;EACA,qBAAA;AxBg9DJ;AsBx/DE;EEsCA;IAKI,gBAAA;ExBi9DJ;EwB/8DI;IACE,6BAAA;ExBi9DN;AACF;AwB78DE;EACE,YAAA;AxB+8DJ;AwB58DE;EACE;IACE,gBAAA;ExB88DJ;EwB58DI;IACE,6BAAA;ExB88DN;AACF;;AwBv8DA;EHrEM,cAAA;EAAA,kRAAA;EAFA,kBAAA;EAEA,kBAAA;EAAA,mBAAA;EAAA,uBAAA;EAAA,gBAAA;ArBshEN;;AwBz8DA;EACE,kBAAA;AxB48DF;;AwBr8DA;EACE,qBAAA;AxBw8DF;;AwBn8DA;EACE,gBAAA;EACA,WAAA;AxBs8DF;;AwB77DA;EACE,cAAA;AxBg8DF;;AwB37DA;;EAEE,cAAA;EACA,cAAA;EACA,kBAAA;EACA,wBAAA;AxB87DF;;AwB37DA;EACE,eAAA;AxB87DF;;AwB37DA;EACE,WAAA;AxB87DF;;AwBv7DA;EACE,kBAAA;AxB07DF;;AyBjkEA;EJMM,wRAAA;EAFA,iBAAA;EAEA,mBAAA;EAAA,gBAAA;EIJJ,sBAAA;EACA,iCAAA;EACA,WAAA;EACA,kBAAA;EACA,kCAAA;AzBukEF;AyBpkEE;EACE,gBAAA;AzBskEJ;AyBlkEE;EACE,kBAAA;AzBokEJ;;AyBhkEA;EACE,cAAA;EACA,cAAA;EACA,gBAAA;AzBmkEF;;AyB7jEE;EACE,cAAA;EACA,oBAAA;EACA,kBAAA;EACA,oBAAA;EACA,oBAAA;AzBgkEJ;AyB1jEI;EACE,8BAAA;EACA,mBAAA;EACA,oBAAA;EACA,oBAAA;AzB4jEN;AyBxjEE;EAtBF;IAuBI,wBAAA;EzB2jEF;AACF;;A0B9mEA;EACE,gBAAA;EACA,cAAA;A1BinEF;A0B9mEE;EACE,gBAAA;A1BgnEJ;A0B7mEE;EATF;IAUI,wBAAA;E1BgnEF;AACF;;A2B3nEA;EACE,yBAAA;EACA,qBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;A3B8nEF;A2B3nEE;EACE,kBAAA;A3B6nEJ;;A4BzoEA;EACE,kBAAA;A5B4oEF;;A6B3oEA;EAEE,qBAAA;EACA,aAAA;A7B6oEF;A6B1oEI;EACE,eAAA;EACA,kBAAA;A7B4oEN;A6BxoEE;EACE,qBAAA;A7B0oEJ;A6BvoEE;;EAEE,kBAAA;A7ByoEJ;A6BtoEE;EACE,uBAAA;A7BwoEJ;A6BtoEI;EACE,uBAAA;A7BwoEN;;A8BjqEA;EAEE,aAAA;A9BmqEF;A8BhqEI;EACE,eAAA;EACA,kBAAA;A9BkqEN;A8B9pEE;EACE,qBAAA;A9BgqEJ;A8B7pEE;;EAEE,kBAAA;A9B+pEJ;A8B5pEE;EACE,4BAAA;A9B8pEJ;A8B5pEI;EACE,4BAAA;A9B8pEN;;A+BtrEA;EAEE,gBAAA;A/BwrEF;A+BtrEE;EAJF;IAKI,wBAAA;E/ByrEF;AACF;;AgC/rEA;EACE,oBAAA;AhCksEF;AgC/rEI;EACE,cAAA;EACA,iBAAA;AhCisEN;;AgC5rEA;EACE,gBAAA;AhC+rEF;;AiC3sEA;EvCoCE,kRAAA;EACA,kBAAA;EUzBA,gBAAA;E8BkMA,yBAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;EACA,gBAAA;EAuCA,6CAAA;EA4BA,4CAAA;AlCm8DF;AkCngEI;EACE,4BAAA;EACA,cA/MoB;EAgNpB,gBAAA;EACA,gBAAA;AlCqgEN;AkC//DI;;EAEE,yBAAA;EACA,cA1NoB;AlC2tE1B;AkC7/DI;EACE,gBAAA;AlC+/DN;AkC5/DE;;EAEE,uBAAA;EACA,yBAAA;EACA,mBAAA;EACA,oBAAA;AlC8/DJ;AkC3/DE;ExC9MA,kRAAA;EACA,eAAA;EwC+ME,gBAAA;EACA,sBAAA;EACA,gBAAA;AlC8/DJ;AkC1/DE;EA1LA,qBAAA;EACA,kBAAA;AlCurEF;AkCtrEE;EACE,gCAAA;EACA,0BAAA;EACA,wBAAA;EACA,SAAA;EACA,WAAA;EACA,SAAA;EACA,OAAA;EACA,kBAAA;EACA,WAAA;AlCwrEJ;AkCpgEM;E1B9PJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlCisEF;AL9tEE;EACE,cAAA;AKguEJ;AL7tEE;EACE,cAAA;AK+tEJ;AL5tEE;EACE,cAAA;AK8tEJ;AL3tEE;EgBpEA,8BAAA;EACA,iBAAA;AXkyEF;AU9xEE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AVgxEJ;AU7wEE;EAEE,cAAA;AV8wEJ;AU3wEE;EACE,cAAA;AV6wEJ;AU1wEE;EACE,cAAA;AV4wEJ;AkC7tEE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlCguEJ;AkC/tEI;EACE,iBAAA;AlCiuEN;AkCvtEE;EACE,aAAA;AlCytEJ;AkCvtEE;EACE,WAAA;AlCytEJ;AkCtkEI;EAEE,yBAAA;AlCukEN;AkCnkEM;E1BzQJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlC2wEF;ALxyEE;EACE,cAAA;AK0yEJ;ALvyEE;EACE,cAAA;AKyyEJ;ALtyEE;EACE,cAAA;AKwyEJ;ALryEE;EgBpEA,8BAAA;EACA,iBAAA;AX42EF;AUx2EE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV01EJ;AUv1EE;EAEE,cAAA;AVw1EJ;AUr1EE;EACE,cAAA;AVu1EJ;AUp1EE;EACE,cAAA;AVs1EJ;AkCvyEE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlC0yEJ;AkCzyEI;EACE,iBAAA;AlC2yEN;AkC9wEE;EACE,aAlFsB;AlCk2E1B;AkCjoEM;E1B/QJ,gCAAA;EACA,+BAAA;Eb4DA,cAAA;EACA,0BAAA;Ee1DA,6BAAA;EACA,SAAA;EACA,gBAAA;EACA,wBAAA;UAAA,gBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EyBFA,YAAA;ECAA,WAAA;EFwEA,kCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,qBAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EAEA,QAAA;EACA,qCAAA;UAAA,6BAAA;AlC+0EF;AL52EE;EACE,cAAA;AK82EJ;AL32EE;EACE,cAAA;AK62EJ;AL12EE;EACE,cAAA;AK42EJ;ALz2EE;EgBpEA,8BAAA;EACA,iBAAA;AXg7EF;AU56EE;EFbA,gCAAA;EACA,+BAAA;EE+BE,6BAAA;EACA,wBAAA;UAAA,gBAAA;EACA,0BAAA;AV85EJ;AU35EE;EAEE,cAAA;AV45EJ;AUz5EE;EACE,cAAA;AV25EJ;AUx5EE;EACE,cAAA;AV05EJ;AkC32EE;ECrFA,cAAA;ECAA,aAAA;EFuFE,sBAAA;AlC82EJ;AkC72EI;EACE,iBAAA;AlC+2EN;AkCz1EE;EACE,aA3EsB;AlCs6E1B;AkC7rEI;EACE,yBAAA;EACA,cA3P2B;AlC07EjC;AkC3rEE;;EAEE,yBAAA;EACA,cAzQsB;AlCs8E1B;;AiCz9EE;EADF;IAEI,2BAAA;EjC69EF;AACF;;AiCz9EE;EACE,yBAAA;EACA,gB9GkTqB;A6E0qEzB;;AiCv9EE;EADF;IAEI,wBAAA;EjC29EF;AACF;;AqC7+EA;EACE,iBAAA;ArCg/EF;;AqC3+EA;EACE,SAAA;EACA,SAAA;EACA,UAAA;ArC8+EF;;AqCt+EA;EACE,mBAAA;ArCy+EF;;AqC78EA;EACE,SAAA;EACA,8BAAA;UAAA,sBAAA;EACA,cAAA;EACA,cAAA;EACA,SAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;ArCg9EF;;AqC38EA;EACE,gBAAA;ArC88EF;;AqCn8EA;EACE,cAAA;ArCs8EF;;AsCjhFE;EACE,aAAA;EACA,SAAA;AtCohFJ;;AuCvhFA;EACE,qBAAA;AvC0hFF;;AwC3hFA;EACE,SAAA;AxC8hFF;;AyC/hFA;EACE,SAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;AzCkiFF;AyChiFE;EAPF;IAQI,0BAAA;IACA,wBAAA;EzCmiFF;AACF;;A0C5iFE;EACE,gBAAA;A1C+iFJ;;A2C9iFA;EAEE,SAAA;A3CgjFF","file":"web-area-title.css","sourcesContent":["/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n\n$theme-image-path: \"../img\" !default;\n\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n\n$theme-show-compile-warnings: true !default;\n$theme-show-notifications: true !default;\n\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n\n$theme-namespace: (\n \"grid\": (\n namespace: \"grid-\",\n output: true,\n ),\n \"utility\": (\n namespace: \"u-\",\n output: false,\n ),\n) !default;\n\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n\n$theme-prefix-separator: \"\\\\:\" !default;\n\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n\n$theme-layout-grid-use-important: false !default;\n\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n\n$theme-global-border-box-sizing: true !default;\n\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n\n$theme-focus-color: \"blue-40v\" !default;\n$theme-focus-offset: 0 !default;\n$theme-focus-style: solid !default;\n$theme-focus-width: 0.5 !default;\n\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n\n$theme-icon-image-size: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n\n$theme-respect-user-font-size: true !default;\n\n// $theme-root-font-size only applies when\n// $theme-respect-user-font-size is set to\n// false.\n\n// This will set the root font size\n// as a specific px value and use px values\n// for media queries.\n\n// Accepts values in px\n\n$theme-root-font-size: 10px !default;\n\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n\n$theme-global-paragraph-styles: false !default;\n$theme-global-link-styles: false !default;\n$theme-global-content-styles: false !default;\n\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n\n$theme-font-path: \"../fonts\" !default;\n\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n\n$theme-typeface-tokens: (\n example-serif-token: (\n display-name: \"Example Serif Display Name\",\n cap-height: 364px,\n ),\n example-sans-token: (\n display-name: \"Example Sans Display Name\",\n cap-height: 364px,\n ),\n) !default;\n\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n\n// condensed\n$theme-font-type-cond: false !default;\n\n// icon\n$theme-font-type-icon: false !default;\n\n// language-specific\n$theme-font-type-lang: false !default;\n\n// monospace\n$theme-font-type-mono: \"roboto-mono\" !default;\n\n// sans-serif\n$theme-font-type-sans: \"source-sans-pro\" !default;\n\n// serif\n$theme-font-type-serif: \"merriweather\" !default;\n\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n\n$theme-font-cond-custom-stack: false !default;\n$theme-font-icon-custom-stack: false !default;\n$theme-font-lang-custom-stack: false !default;\n$theme-font-mono-custom-stack: false !default;\n$theme-font-sans-custom-stack: false !default;\n$theme-font-serif-custom-stack: false !default;\n\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n\n$theme-font-cond-custom-src: false !default;\n$theme-font-icon-custom-src: false !default;\n$theme-font-lang-custom-src: false !default;\n$theme-font-mono-custom-src: false !default;\n$theme-font-sans-custom-src: false !default;\n$theme-font-serif-custom-src: false !default;\n\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n\n$theme-font-role-ui: \"sans\" !default;\n$theme-font-role-heading: \"serif\" !default;\n$theme-font-role-body: \"sans\" !default;\n$theme-font-role-code: \"mono\" !default;\n$theme-font-role-alt: \"serif\" !default;\n\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n\n$theme-type-scale-3xs: 2 !default;\n$theme-type-scale-2xs: 3 !default;\n$theme-type-scale-xs: 4 !default;\n$theme-type-scale-sm: 5 !default;\n$theme-type-scale-md: 6 !default;\n$theme-type-scale-lg: 9 !default;\n$theme-type-scale-xl: 12 !default;\n$theme-type-scale-2xl: 14 !default;\n$theme-type-scale-3xl: 15 !default;\n\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n\n$theme-font-weight-thin: false !default;\n$theme-font-weight-light: 300 !default;\n$theme-font-weight-normal: 400 !default;\n$theme-font-weight-medium: false !default;\n$theme-font-weight-semibold: false !default;\n$theme-font-weight-bold: 700 !default;\n$theme-font-weight-heavy: false !default;\n\n// If USWDS is generating your @font-face rules,\n// should we generate all available weights\n// regardless of the assignments above?\n\n$theme-generate-all-weights: false !default;\n\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n\n// Body settings are the equivalent of setting the element\n$theme-body-font-family: \"body\" !default;\n$theme-body-font-size: \"sm\" !default;\n$theme-body-line-height: 5 !default;\n\n// If true, explicitly style the element with the base styles\n$theme-style-body-element: false !default;\n\n// Headings\n$theme-h1-font-size: \"2xl\" !default;\n$theme-h2-font-size: \"xl\" !default;\n$theme-h3-font-size: \"lg\" !default;\n$theme-h4-font-size: \"sm\" !default;\n$theme-h5-font-size: \"xs\" !default;\n$theme-h6-font-size: \"3xs\" !default;\n$theme-heading-line-height: 2 !default;\n$theme-small-font-size: \"2xs\" !default;\n$theme-display-font-size: \"3xl\" !default;\n\n// Text and prose\n$theme-text-measure-narrow: 1 !default;\n$theme-text-measure: 4 !default;\n$theme-text-measure-wide: 6 !default;\n$theme-prose-font-family: \"body\" !default;\n\n// Lead text\n$theme-lead-font-family: \"heading\" !default;\n$theme-lead-font-size: \"lg\" !default;\n$theme-lead-line-height: 6 !default;\n$theme-lead-measure: 6 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n\n$test-system-color-tokens: false !default;\n\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n\n// Base colors\n$theme-color-base-family: \"gray-cool\" !default;\n$theme-color-base-lightest: \"gray-5\" !default;\n$theme-color-base-lighter: \"gray-cool-10\" !default;\n$theme-color-base-light: \"gray-cool-30\" !default;\n$theme-color-base: \"gray-cool-50\" !default;\n$theme-color-base-dark: \"gray-cool-60\" !default;\n$theme-color-base-darker: \"gray-cool-70\" !default;\n$theme-color-base-darkest: \"gray-90\" !default;\n$theme-color-base-ink: \"gray-90\" !default;\n\n// Primary colors\n$theme-color-primary-family: \"blue\" !default;\n$theme-color-primary-lightest: false !default;\n$theme-color-primary-lighter: \"blue-10\" !default;\n$theme-color-primary-light: \"blue-30\" !default;\n$theme-color-primary: \"blue-60v\" !default;\n$theme-color-primary-vivid: \"blue-warm-60v\" !default;\n$theme-color-primary-dark: \"blue-warm-70v\" !default;\n$theme-color-primary-darker: \"blue-warm-80v\" !default;\n$theme-color-primary-darkest: false !default;\n\n// Secondary colors\n$theme-color-secondary-family: \"red\" !default;\n$theme-color-secondary-lightest: false !default;\n$theme-color-secondary-lighter: \"red-cool-10\" !default;\n$theme-color-secondary-light: \"red-30\" !default;\n$theme-color-secondary: \"red-50\" !default;\n$theme-color-secondary-vivid: \"red-cool-50v\" !default;\n$theme-color-secondary-dark: \"red-60v\" !default;\n$theme-color-secondary-darker: \"red-70v\" !default;\n$theme-color-secondary-darkest: false !default;\n\n// Accent warm colors\n$theme-color-accent-warm-family: \"orange\" !default;\n$theme-color-accent-warm-lightest: false !default;\n$theme-color-accent-warm-lighter: \"orange-10\" !default;\n$theme-color-accent-warm-light: \"orange-20v\" !default;\n$theme-color-accent-warm: \"orange-30v\" !default;\n$theme-color-accent-warm-dark: \"orange-50v\" !default;\n$theme-color-accent-warm-darker: \"orange-60\" !default;\n$theme-color-accent-warm-darkest: false !default;\n\n// Accent cool colors\n$theme-color-accent-cool-family: \"blue-cool\" !default;\n$theme-color-accent-cool-lightest: false !default;\n$theme-color-accent-cool-lighter: \"blue-cool-5v\" !default;\n$theme-color-accent-cool-light: \"blue-cool-20v\" !default;\n$theme-color-accent-cool: \"cyan-30v\" !default;\n$theme-color-accent-cool-dark: \"blue-cool-40v\" !default;\n$theme-color-accent-cool-darker: \"blue-cool-60v\" !default;\n$theme-color-accent-cool-darkest: false !default;\n\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n\n// Error colors\n$theme-color-error-family: \"red-warm\" !default;\n$theme-color-error-lighter: \"red-warm-10\" !default;\n$theme-color-error-light: \"red-warm-30v\" !default;\n$theme-color-error: \"red-warm-50v\" !default;\n$theme-color-error-dark: \"red-60v\" !default;\n$theme-color-error-darker: \"red-70\" !default;\n\n// Warning colors\n$theme-color-warning-family: \"gold\" !default;\n$theme-color-warning-lighter: \"yellow-5\" !default;\n$theme-color-warning-light: \"yellow-10v\" !default;\n$theme-color-warning: \"gold-20v\" !default;\n$theme-color-warning-dark: \"gold-30v\" !default;\n$theme-color-warning-darker: \"gold-50v\" !default;\n\n// Success colors\n$theme-color-success-family: \"green-cool\" !default;\n$theme-color-success-lighter: \"green-cool-5\" !default;\n$theme-color-success-light: \"green-cool-20v\" !default;\n$theme-color-success: \"green-cool-40v\" !default;\n$theme-color-success-dark: \"green-cool-50v\" !default;\n$theme-color-success-darker: \"green-cool-60v\" !default;\n\n// Info colors\n$theme-color-info-family: \"cyan\" !default;\n$theme-color-info-lighter: \"cyan-5\" !default;\n$theme-color-info-light: \"cyan-20\" !default;\n$theme-color-info: \"cyan-30v\" !default;\n$theme-color-info-dark: \"cyan-40v\" !default;\n$theme-color-info-darker: \"blue-cool-60\" !default;\n\n// Disabled colors\n$theme-color-disabled-family: \"gray\" !default;\n$theme-color-disabled-light: \"gray-10\" !default;\n$theme-color-disabled: \"gray-20\" !default;\n$theme-color-disabled-dark: \"gray-30\" !default;\n\n// Emergency colors\n$theme-color-emergency: \"red-warm-60v\" !default;\n$theme-color-emergency-dark: \"red-warm-80\" !default;\n\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n\n// Body\n$theme-body-background-color: \"white\" !default;\n\n// Text\n$theme-text-color: \"ink\" !default;\n$theme-text-reverse-color: \"white\" !default;\n\n// Links\n$theme-link-color: \"primary\" !default;\n$theme-link-visited-color: \"violet-70v\" !default;\n$theme-link-hover-color: \"primary-dark\" !default;\n$theme-link-active-color: \"primary-darker\" !default;\n$theme-link-reverse-color: \"base-lighter\" !default;\n$theme-link-reverse-hover-color: \"base-lightest\" !default;\n$theme-link-reverse-active-color: \"white\" !default;\n","@use \"settings-general\" as general;\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n$theme-alert-padding-y: 2 !default;\n$theme-alert-text-color: default !default;\n$theme-alert-text-reverse-color: default !default;\n$theme-alert-link-color: default !default;\n$theme-alert-link-reverse-color: default !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"default\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Collection\n$theme-collection-font-family: \"ui\" !default;\n$theme-collection-header-typeset: \"ui\", \"md\", 3 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-background-color: default !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n$theme-input-tile-border-radius: \"md\" !default;\n$theme-input-tile-border-width: 2px !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{general.$theme-image-path}/hero.png\" !default;\n\n// Icon List\n$theme-icon-list-font-family: \"body\" !default;\n$theme-icon-list-title-font-family: \"heading\" !default;\n\n// Identifier\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-primary-link-color: default !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Modal\n$theme-modal-border-radius: \"lg\" !default;\n$theme-modal-default-max-width: \"mobile-lg\" !default;\n$theme-modal-lg-content-max-width: \"tablet\" !default;\n$theme-modal-lg-max-width: \"tablet-lg\" !default;\n\n// Pagination\n$theme-pagination-background-color: \"default\" !default;\n$theme-pagination-breakpoint: \"tablet\" !default;\n$theme-pagination-button-border-radius: \"md\" !default;\n$theme-pagination-button-border-width: 1px !default;\n$theme-pagination-font-family: \"ui\" !default;\n\n// Process List\n$theme-process-list-counter-background-color: \"white\" !default;\n$theme-process-list-counter-border-color: \"ink\" !default;\n$theme-process-list-counter-border-width: 0.5 !default;\n$theme-process-list-counter-font-family: \"ui\" !default;\n$theme-process-list-counter-font-size: \"lg\" !default;\n$theme-process-list-counter-gap-color: \"white\" !default;\n$theme-process-list-counter-gap-width: 0.5 !default;\n$theme-process-list-counter-size: 5 !default;\n$theme-process-list-counter-text-color: \"ink\" !default;\n$theme-process-list-connector-color: \"primary-lighter\" !default;\n$theme-process-list-connector-width: 1 !default;\n$theme-process-list-font-family: \"ui\" !default;\n$theme-process-list-font-size: \"sm\" !default;\n$theme-process-list-heading-color: \"ink\" !default;\n$theme-process-list-heading-font-family: \"ui\" !default;\n$theme-process-list-heading-font-size: \"lg\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Site Alert\n$theme-site-alert-max-width: \"desktop\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Summary box\n$theme-summary-box-background-color: \"info-lighter\" !default;\n$theme-summary-box-border-color: \"info-light\" !default;\n$theme-summary-box-border-width: 1px !default;\n$theme-summary-box-border-radius: \"md\" !default;\n$theme-summary-box-font-family: \"ui\" !default;\n$theme-summary-box-link-color: default !default;\n$theme-summary-box-text-color: default !default;\n\n// Table\n$theme-table-border-color: \"ink\" !default;\n$theme-table-header-background-color: \"base-lighter\" !default;\n$theme-table-header-text-color: default !default;\n$theme-table-stripe-background-color: \"base-lightest\" !default;\n$theme-table-stripe-text-color: default !default;\n$theme-table-text-color: default !default;\n$theme-table-sorted-header-background-color: \"accent-cool-light\" !default;\n$theme-table-sorted-background-color: \"accent-cool-lighter\" !default;\n$theme-table-sorted-stripe-background-color: \"blue-cool-10v\" !default;\n$theme-table-sorted-icon-color: default !default;\n$theme-table-unsorted-icon-color: \"base\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n\n$theme-border-radius-sm: 2px !default;\n$theme-border-radius-md: 0.5 !default;\n$theme-border-radius-lg: 1 !default;\n\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n\n$theme-column-gap-sm: 2px !default;\n$theme-column-gap-md: 2 !default;\n$theme-column-gap-lg: 3 !default;\n\n// These determine the responsive gap sizes set with .grid-gap\n$theme-column-gap-mobile: 2 !default;\n$theme-column-gap-desktop: 4 !default;\n\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n\n$theme-grid-container-max-width: \"desktop\" !default;\n\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n\n$theme-site-margins-breakpoint: \"desktop\" !default;\n$theme-site-margins-width: 4 !default;\n$theme-site-margins-mobile-width: 2 !default;\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n\n$utilities-use-important: false !default;\n$output-these-utilities: default !default;\n\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n\n$theme-utility-breakpoints: (\n // 160px:\n \"card\": false,\n // 240px:\n \"card-lg\": false,\n // 320px:\n \"mobile\": false,\n // 480px:\n \"mobile-lg\": true,\n // 640px:\n \"tablet\": true,\n // 880px:\n \"tablet-lg\": false,\n // 1024px:\n \"desktop\": true,\n // 1200px:\n \"desktop-lg\": false,\n // 1400px:\n \"widescreen\": false\n) !default;\n\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n\n$global-color-palettes: (\"palette-color-default\") !default;\n\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n\n$add-aspect-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$add-list-reset-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-items-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$align-self-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$background-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-color-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$border-radius-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$border-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$bottom-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$box-shadow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$circle-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$clearfix-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$cursor-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$display-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-direction-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$flex-wrap-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$float-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-family-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-feature-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-style-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$font-weight-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$justify-content-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$left-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$letter-spacing-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$line-height-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$margin-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$max-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$measure-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-height-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$min-width-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$opacity-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$order-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$outline-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$overflow-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$padding-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$pin-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$position-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$right-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$square-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-decoration-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-decoration-color-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: true,\n visited: false,\n) !default;\n\n$text-indent-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$text-transform-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$top-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$vertical-align-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$whitespace-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$width-settings: (\n output: true,\n responsive: true,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n$z-index-settings: (\n output: true,\n responsive: false,\n active: false,\n focus: false,\n hover: false,\n visited: false,\n) !default;\n\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n\n// .add-aspect\n\n$add-aspect-palettes: () !default;\n$add-aspect-manual-values: () !default;\n\n// .align-items\n\n$align-items-palettes: (\"palette-align-items-default\") !default;\n$align-items-manual-values: () !default;\n\n// .align-self\n\n$align-self-palettes: (\"palette-align-self-default\") !default;\n$align-self-manual-values: () !default;\n\n// .background-color\n\n$background-color-palettes: () !default;\n$background-color-manual-values: () !default;\n\n// .border\n\n$border-palettes: (\"palette-border-default\") !default;\n$border-manual-values: () !default;\n\n// .border-color\n\n$border-color-palettes: () !default;\n$border-color-manual-values: () !default;\n\n// .border-radius\n\n$border-radius-palettes: (\"palette-border-radius-default\") !default;\n$border-radius-manual-values: () !default;\n\n// .border-style\n\n$border-style-palettes: (\"palette-border-style-default\") !default;\n$border-style-manual-values: () !default;\n\n// .border-width\n\n$border-width-palettes: (\"palette-border-width-default\") !default;\n$border-width-manual-values: () !default;\n\n// .bottom\n\n$bottom-palettes: (\"palette-bottom-default\") !default;\n\n$bottom-manual-values: () !default;\n\n// .box-shadow\n\n$box-shadow-palettes: (\"palette-box-shadow-default\") !default;\n\n$box-shadow-manual-values: () !default;\n\n// .circle\n\n$circle-palettes: (\"palette-circle-default\") !default;\n$circle-manual-values: () !default;\n\n// .color\n\n$color-palettes: () !default;\n$color-manual-values: () !default;\n\n// .cursor\n\n$cursor-palettes: (\"palette-cursor-default\") !default;\n$cursor-manual-values: () !default;\n\n// .display\n\n$display-palettes: (\"palette-display-default\") !default;\n$display-manual-values: () !default;\n\n// .flex\n\n$flex-palettes: (\"palette-flex-default\") !default;\n$flex-manual-values: () !default;\n\n// .flex-direction\n\n$flex-direction-palettes: (\"palette-flex-direction-default\") !default;\n$flex-direction-manual-values: () !default;\n\n// .flex-wrap\n\n$flex-wrap-palettes: (\"palette-flex-wrap-default\") !default;\n$flex-wrap-manual-values: () !default;\n\n// .float\n\n$float-palettes: (\"palette-float-default\") !default;\n$float-manual-values: () !default;\n\n// .font\n\n$font-palettes: (\"palette-font-default\") !default;\n$font-manual-values: () !default;\n\n// .font-family\n\n$font-family-palettes: (\"palette-font-family-default\") !default;\n$font-family-manual-values: () !default;\n\n// .font-feature-settings\n\n$font-feature-palettes: (\"palette-font-feature-settings-default\") !default;\n$font-feature-manual-values: () !default;\n\n// .font-style\n\n$font-style-palettes: (\"palette-font-style-default\") !default;\n$font-style-manual-values: () !default;\n\n// .font-weight\n\n$font-weight-palettes: (\"palette-font-weight-default\") !default;\n$font-weight-manual-values: () !default;\n\n// .height\n\n$height-palettes: (\"palette-height-default\") !default;\n$height-manual-values: () !default;\n\n// .justify-content\n\n$justify-content-palettes: (\"palette-justify-content-default\") !default;\n$justify-content-manual-values: () !default;\n\n// .left\n\n$left-palettes: (\"palette-left-default\") !default;\n$left-manual-values: () !default;\n\n// .letter-spacing\n\n$letter-spacing-palettes: (\"palette-letter-spacing-default\") !default;\n$letter-spacing-manual-values: () !default;\n\n// .line-height\n\n$line-height-palettes: (\"palette-line-height-default\") !default;\n$line-height-manual-values: () !default;\n\n// .margin\n\n$margin-palettes: (\"palette-margin-default\") !default;\n$margin-manual-values: () !default;\n$margin-vertical-palettes: (\"palette-margin-vertical-default\") !default;\n$margin-vertical-manual-values: () !default;\n$margin-horizontal-palettes: (\"palette-margin-horizontal-default\") !default;\n$margin-horizontal-manual-values: () !default;\n\n// .max-height\n\n$max-height-palettes: (\"palette-max-height-default\") !default;\n$max-height-manual-values: () !default;\n\n// .max-width\n\n$max-width-palettes: (\"palette-max-width-default\") !default;\n$max-width-manual-values: () !default;\n\n// .measure\n\n$measure-palettes: (\"palette-measure-default\") !default;\n$measure-manual-values: () !default;\n\n// .min-height\n\n$min-height-palettes: (\"palette-min-height-default\") !default;\n$min-height-manual-values: () !default;\n\n// .min-width\n\n$min-width-palettes: (\"palette-min-width-default\") !default;\n$min-width-manual-values: () !default;\n\n// .opacity\n\n$opacity-palettes: (\"palette-opacity-default\") !default;\n$opacity-manual-values: () !default;\n\n// .order\n\n$order-palettes: (\"palette-order-default\") !default;\n$order-manual-values: () !default;\n\n// .outline\n\n$outline-palettes: (\"palette-outline-default\") !default;\n$outline-manual-values: () !default;\n\n// .outline-color\n\n$outline-color-palettes: (\"palette-outline-color-default\") !default;\n$outline-color-manual-values: () !default;\n\n// .overflow\n\n$overflow-palettes: (\"palette-overflow-default\") !default;\n$overflow-manual-values: () !default;\n\n// .padding\n\n$padding-palettes: (\"palette-padding-default\") !default;\n$padding-manual-values: () !default;\n\n// .position\n\n$position-palettes: (\"palette-position-default\") !default;\n$position-manual-values: () !default;\n\n// .right\n\n$right-palettes: (\"palette-right-default\") !default;\n$right-manual-values: () !default;\n\n// .square\n\n$square-palettes: (\"palette-square-default\") !default;\n$square-manual-values: () !default;\n\n// .text-align\n\n$text-align-palettes: (\"palette-text-align-default\") !default;\n$text-align-manual-values: () !default;\n\n// .text-decoration\n\n$text-decoration-palettes: (\"palette-text-decoration-default\") !default;\n$text-decoration-manual-values: () !default;\n\n// .text-decoration-color\n\n$text-decoration-color-palettes: () !default;\n$text-decoration-color-manual-values: () !default;\n\n// .text-indent\n\n$text-indent-palettes: (\"palette-text-indent-default\") !default;\n$text-indent-manual-values: () !default;\n\n// .text-transform\n\n$text-transform-palettes: (\"palette-text-transform-default\") !default;\n$text-transform-manual-values: () !default;\n\n// .top\n\n$top-palettes: (\"palette-top-default\") !default;\n$top-manual-values: () !default;\n\n// .vertical-align\n\n$vertical-align-palettes: (\"palette-vertical-align-default\") !default;\n$vertical-align-manual-values: () !default;\n\n// .white-space\n\n$whitespace-palettes: (\"palette-white-space-default\") !default;\n$whitespace-manual-values: () !default;\n\n// .width\n\n$width-palettes: (\"palette-width-default\") !default;\n$width-manual-values: () !default;\n\n// .z-index\n\n$z-index-palettes: (\"palette-z-index-default\") !default;\n$z-index-manual-values: () !default;\n","@use \"root\";\n@use \"sass:math\";\n\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n\n@function px-to-rem($pixels) {\n @if not $pixels {\n @return false;\n }\n $px-to-rem: (math.div($pixels, root.$root-font-size-equiv)) * 1rem;\n $px-to-rem: math.div(math.round($px-to-rem * 100), 100);\n\n @return $px-to-rem;\n}\n\n// @debug px-to-rem(16px);\n// @return 1rem\n","/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"root\";\n\n@function rem-to-px($value-in-rem) {\n @if unit($value-in-rem) == \"rem\" {\n $rem-to-px: (math.div($value-in-rem, 1rem)) * root.$root-font-size-equiv;\n @return $rem-to-px;\n }\n @if unit($value-in-rem) != \"px\" {\n @error 'This value must be in either px or rem';\n }\n @return $value-in-rem;\n}\n\n// @debug rem-to-px(2rem);\n// @return 32px\n","/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n\n@use \"sass:math\";\n\n@function rem-to-user-em($grid-in-rem) {\n $rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;\n\n @return $rem-to-user-em;\n}\n\n// @debug rem-to-user-em(2rem);\n// @return 2em\n","/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens/units/grid-base\";\n@use \"root\";\n\n@function spacing-multiple($unit) {\n $grid-to-rem: math.div(\n (grid-base.$system-spacing-grid-base * $unit),\n root.$root-font-size-equiv\n ) * 1rem;\n\n @return $grid-to-rem;\n}\n\n// @debug spacing-multiple(1);\n// @return 0.5rem\n","/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n\n$error-output-override: false !default;\n@function uswds-error($message, $override: $error-output-override) {\n @if $override {\n @return \"Error: #{$message}\";\n }\n\n @error \"#{$message}\";\n}\n","/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"error\" as *;\n\n@function error-not-token($token, $type, $valid-token-map: false) {\n $valid-token-message: if(\n $valid-token-map,\n \" Valid tokens: #{map.keys($valid-token-map)}\",\n \"\"\n );\n @return uswds-error(\n \"'#{$token}' is not a valid USWDS #{$type} token. #{$valid-token-message}\"\n );\n}\n","/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n\n@use \"sass:list\";\n\n@function get-last($props) {\n $length: list.length($props);\n $last: if($length == 0, null, list.nth($props, -1));\n\n @return $last;\n}\n\n// @debug get-last((1, 2, 3));\n// @return 3;\n","/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"get-last\" as *;\n\n@function append-important($source, $destination) {\n @if get-last($source) == \"!important\" {\n @return list.append($destination, !important, comma);\n }\n\n @return $destination;\n}\n\n// @debug append-important((1, 2, !important), (3, 4));\n// @return 3, 4, !important\n","/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function de-list($value) {\n $types: (\"list\", \"arglist\");\n\n @if not list.index($types, meta.type-of($value)) {\n @return $value;\n }\n\n $output: if(list.length($value) == 1, list.nth($value, 1), $value);\n\n @return $output;\n}\n\n// @debug de-list((1));\n// @return 1;\n","/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../variables/project-defaults\" as *;\n\n@function get-default($var) {\n $value: map.get($project-defaults, $var);\n @return $value;\n}\n","/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n@use \"de-list\" as *;\n@use \"get-last\" as *;\n\n@function has-important($props) {\n $props: de-list($props);\n\n @if get-last($props) == \"!important\" {\n @return true;\n }\n\n @return false;\n}\n\n// @debug has-important((foo, \"!important\"));\n// @return true\n","/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map.merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// @debug map-collect(\n// (\n// \"foo\": bar,\n// ),\n// (\n// \"baz\": qux,\n// )\n// );\n","/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n@use \"sass:map\";\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map.get($map, $key);\n }\n\n @return $map;\n}\n\n// @debug map-deep-get(\n// (\n// \"foo\": (\n// \"bar\": baz\n// )\n// ),\n// foo,\n// bar\n// );\n","/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n@use \"sass:list\";\n\n@function multi-cat($list1, $list2) {\n $this-list: ();\n\n @each $e in $list1 {\n @each $ee in $list2 {\n $this-block: $e + $ee;\n $this-list: list.join($this-list, $this-block);\n }\n }\n\n @return $this-list;\n}\n\n// @debug multi-cat((1, 2), (a, b));\n// 1a, 1b, 2a, 2b\n","/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n@use \"sass:list\";\n@use \"sass:meta\";\n\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through list.length($list) {\n @if meta.type-of(list.nth($list, $i)) == list and $recursive {\n $result: list.append(\n $result,\n remove(list.nth($list, $i), $value, $recursive)\n );\n } @else if list.nth($list, $i) != $value {\n $result: list.append($result, list.nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n// @debug remove((1, 2, 3), 2);\n// @return 1, 3\n","/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"sass:string\";\n\n@function smart-quote($value) {\n @if meta.type-of($value) == \"string\" {\n @return string.quote($value);\n }\n\n @if meta.type-of($value) ==\n \"number\" and\n list.index((\"px\", \"xl\", \"xs\"), math.unit($value))\n {\n @return meta.inspect($value);\n }\n\n @if meta.type-of($value) == \"color\" {\n @error 'Only use quoted color tokens in USWDS functions and mixins. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n }\n\n @return $value;\n}\n\n// @debug smart-quote(foo);\n// @return foo;\n// @debug smart-quote(\"3xs\");\n// @debug 3xs;\n","@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n\n@function str-replace($string, $search, $replace: \"\") {\n $index: string.index($string, $search);\n\n @if $index {\n @return string.slice($string, 1, $index - 1) + $replace +\n str-replace(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n }\n\n @return $string;\n}\n\n// @debug str-replace(\"Batman\", \"man\");\n// @return Bat;\n","@use \"sass:list\";\n@use \"sass:string\";\n\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n\n@function str-split($string, $separator) {\n $split-arr: ();\n $index: string.index($string, $separator);\n @while $index != null {\n $item: string.slice($string, 1, $index - 1);\n $split-arr: list.append($split-arr, $item);\n $string: string.slice($string, $index + 1);\n $index: string.index($string, $separator);\n }\n $split-arr: list.append($split-arr, $string);\n\n @return $split-arr;\n}\n\n// @debug str-split(\"1, 2, 3, 4, 5\", \",\");\n// @return \"1\" \" 2\" \" 3\" \" 4\" \" 5\";\n","/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:math\";\n\n@function strip-unit($number) {\n @if meta.type-of($number) == \"number\" and not math.is-unitless($number) {\n @return math.div($number, ($number * 0 + 1));\n }\n\n @return $number;\n}\n\n// @debug strip-unit(10px);\n// @return 10;\n","/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"remove\" as *;\n\n@function base-to-map($values) {\n $l: list.length($values);\n\n @if $l == 1 or list.nth($values, $l) != isReadable {\n @return (slug: $values, isReadable: true);\n } @else {\n $values: remove($values, isReadable);\n\n @return (slug: unquote(list.nth($values, 1)), isReadable: true);\n }\n}\n\n@function to-map($key, $values) {\n $l: list.length($values);\n\n @if $key == \"noModifier\" or $key == \"noValue\" {\n $key: \"\";\n }\n\n @return (slug: $key, content: $values);\n}\n","/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@function to-number($value) {\n @if meta.type-of($value) == \"number\" {\n @return $value;\n } @else if meta.type-of($value) != \"string\" {\n @warn \"Value for `to-number` should be a number or a string.\";\n }\n\n $result: 0;\n $digits: 0;\n $minus: string.slice($value, 1, 1) == \"-\";\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n @for $i from if($minus, 2, 1) through string.length($value) {\n $character: string.slice($value, $i, $i);\n\n @if not(list.index(map.keys($numbers), $character) or $character == \".\") {\n @return to-length(\n if($minus, -$result, $result),\n string.slice($value, $i)\n );\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map.get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + math.div(map.get($numbers, $character), $digits);\n }\n }\n\n @return if($minus, -$result, $result);\n}\n","/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"de-list\" as *;\n\n@function unpack($value) {\n $output: ();\n\n @if list.length($value) == 0 {\n @return $value;\n }\n\n @each $i in $value {\n @if meta.type-of($i) == \"list\" {\n @each $ii in $i {\n $output: list.append($output, $ii, comma);\n }\n } @else {\n $output: list.append($output, $i, comma);\n }\n }\n\n @return de-list($output);\n}\n\n// @debug unpack((1, (2.1, 2.2), 3));\n","/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../variables/project-spacing\" as vars;\n\n@function number-to-token($number) {\n $number: meta.inspect($number);\n\n @if not(map.has-key(vars.$number-to-value, $number)) {\n @return false;\n }\n\n @return map.get(vars.$number-to-value, $number);\n}\n\n// @debug number-to-token(0.5);\n// @return 05;\n","/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general/error-not-token.scss\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../variables/project-spacing\" as vars;\n\n@function units($value) {\n $converted: if(\n meta.type-of($value) == \"string\",\n string.quote($value),\n number-to-token($value)\n );\n\n @if not(map.has-key(vars.$project-spacing-standard, $converted)) {\n @return error-not-token(\n $value,\n \"spacing unit\",\n vars.$project-spacing-standard\n );\n }\n\n @return map.get(vars.$project-spacing-standard, $converted);\n}\n\n// @debug units(0.5);\n// @return 0.25rem;\n","/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n\n@use \"../settings\";\n\n$project-font-type-tokens: (\n \"cond\": (\n \"typeface-token\": settings.$theme-font-type-cond,\n \"custom-stack\": settings.$theme-font-cond-custom-stack,\n \"src\": settings.$theme-font-cond-custom-src,\n ),\n \"icon\": (\n \"typeface-token\": settings.$theme-font-type-icon,\n \"custom-stack\": settings.$theme-font-icon-custom-stack,\n \"src\": settings.$theme-font-icon-custom-src,\n ),\n \"lang\": (\n \"typeface-token\": settings.$theme-font-type-lang,\n \"custom-stack\": settings.$theme-font-lang-custom-stack,\n \"src\": settings.$theme-font-lang-custom-src,\n ),\n \"mono\": (\n \"typeface-token\": settings.$theme-font-type-mono,\n \"custom-stack\": settings.$theme-font-mono-custom-stack,\n \"src\": settings.$theme-font-mono-custom-src,\n ),\n \"sans\": (\n \"typeface-token\": settings.$theme-font-type-sans,\n \"custom-stack\": settings.$theme-font-sans-custom-stack,\n \"src\": settings.$theme-font-sans-custom-src,\n ),\n \"serif\": (\n \"typeface-token\": settings.$theme-font-type-serif,\n \"custom-stack\": settings.$theme-font-serif-custom-stack,\n \"src\": settings.$theme-font-serif-custom-src,\n ),\n);\n","/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n\n$system-color-grades: (\n 100: (\n \"min\": 0,\n \"max\": 0,\n ),\n 90: (\n \"min\": 0.005,\n \"max\": 0.015,\n ),\n 80: (\n \"min\": 0.02,\n \"max\": 0.04,\n ),\n 70: (\n \"min\": 0.05,\n \"max\": 0.07,\n ),\n 60: (\n \"min\": 0.1,\n \"max\": 0.125,\n ),\n 50: (\n \"min\": 0.175,\n \"max\": 0.183,\n ),\n 40: (\n \"min\": 0.225,\n \"max\": 0.3,\n ),\n 30: (\n \"min\": 0.35,\n \"max\": 0.45,\n ),\n 20: (\n \"min\": 0.5,\n \"max\": 0.65,\n ),\n 10: (\n \"min\": 0.75,\n \"max\": 0.82,\n ),\n 5: (\n \"min\": 0.85,\n \"max\": 0.93,\n ),\n 0: (\n \"min\": 1,\n \"max\": 1,\n ),\n);\n","/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n\n@use \"../../settings\";\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n\n@function ns($type) {\n $type: smart-quote($type);\n\n @if not map-deep-get(settings.$theme-namespace, $type, output) {\n @return \"\";\n }\n\n @return map-deep-get(settings.$theme-namespace, $type, namespace);\n}\n\n// @debug ns(\"grid\");\n// @return grid-\n","/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"../../functions/general\";\n@use \"../../tokens/color/system-colors\" as color;\n\n@function get-system-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // If the arg being passed to the fn\n // is a variable defined as a list,\n // $color-family will contain this\n // entire list, and needs to be\n // unpacked.\n // ex:\n // in settings:\n // $theme-color-primary.'dark': 'blue', 70\n // in the theme colors map:\n // $color-primary-dark: get-system-color($theme-color-primary.'dark'),\n\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n $color-family: general.smart-quote($color-family);\n $color-variant: general.smart-quote($color-variant);\n\n // If the arg being passed to the fn\n // is false, it should output as `false`\n // to preserve a false value in the\n // target map\n // ex:\n // in settings:\n // $theme-color-primary.'darkest': false;\n // in the theme colors map:\n // 'darkest': get-system-color($theme-color-primary.'darkest'),\n // 'darkest': false, // is the desired outcome\n // TODO: should a false-pass color function be a separate fn?\n\n @if not $color-family {\n @return false;\n }\n\n @if $color-variant {\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-variant,\n $color-grade\n );\n\n @return $output;\n }\n\n $output: general.map-deep-get(\n color.$system-colors,\n $color-family,\n $color-grade\n );\n\n @return $output;\n}\n","/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../functions/general\";\n@use \"../../settings\";\n@use \"../../tokens/color/shortcodes-color-system\" as tokens;\n\n@function set-theme-color($value, $flag: null) {\n $value: general.unpack($value);\n\n // If it's a color, return that color\n // Withhold warning if \"no-warn\" flag\n\n @if meta.type-of($value) == color {\n @if $flag == \"no-warn\" {\n @return $value;\n }\n\n @if settings.$theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n\n // If it's false, return false\n\n @if $value == false {\n @return $value;\n }\n\n // Any other value should be evaluated as a system token\n\n $value: general.smart-quote($value);\n\n @if map.has-key(tokens.$system-color-shortcodes, $value) {\n $our-color: map.get(tokens.$system-color-shortcodes, $value);\n @if $our-color == false {\n @error 'USWDS does not include -90v color tokens';\n }\n @return $our-color;\n }\n\n @error '`#{$value}` is not a valid USWDS color token. '\n + 'See designsystem.digital.gov/design-tokens/color '\n + 'for more information.';\n}\n\n// @debug set-theme-color(\"red-50\");\n// @return #d83933;\n// @debug set-theme-color(false);\n// @return false;\n// @debug set-theme-color(\"red-90v\");\n// @return error \"no 90v tokens\";\n// @debug set-theme-color(#f00, no-warn);\n// @return #f00;\n// @debug set-theme-color(#f00);\n// @return #f00 + warning;\n// @debug set-theme-color(\"foo\");\n// @return error \"not valid\";\n","/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n\n$system-line-height: (\n 1: 1,\n 2: 1.2,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n);\n","/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n\n$system-measure-smaller: 44ex;\n$system-measure-small: 60ex;\n$system-measure-base: 64ex;\n$system-measure-large: 68ex;\n$system-measure-larger: 72ex;\n$system-measure-largest: 88ex;\n","/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"../general/error-not-token\" as *;\n\n@function validate-typeface-token($typeface-token) {\n @if not map.has-key(tokens.$all-typeface-tokens, $typeface-token) {\n @return error-not-token($typeface-token, \"typeface\", $all-typeface-tokens);\n }\n\n @return $typeface-token;\n}\n\n// @debug validate-typeface-token(\"public-sans\");\n// @return public-sans\n\n// @debug validate-typeface-token(\"foo\");\n// @return error\n","/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens\";\n@use \"validate-typeface-token\" as *;\n\n@function cap-height($typeface-token) {\n @if not $typeface-token {\n @return false;\n }\n\n $typeface-token: validate-typeface-token($typeface-token);\n $token-data: map.get(tokens.$all-typeface-tokens, $typeface-token);\n @return map.get($token-data, \"cap-height\");\n}\n\n// @debug cap-height(\"public-sans\");\n// @return 362px;\n","/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/font-role-tokens\" as *;\n\n@function convert-to-font-type($token) {\n @if map.has-key($project-font-role-tokens, $token) {\n @return map.get($project-font-role-tokens, $token);\n }\n\n @return $token;\n}\n\n// @debug convert-to-font-type(\"heading\");\n// @return serif\n","/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n@use \"../../variables/font-type-tokens\" as types;\n@use \"../../tokens/font/typefaces\" as typefaces;\n@use \"../../functions/general\";\n@use \"convert-to-font-type\" as *;\n\n@function get-font-stack($token) {\n // Start by converting to a type token (sans, serif, etc)\n $type-token: convert-to-font-type($token);\n $output-display-name: true;\n $this-stack: null;\n // Get the font type metadata\n $this-font-map: map.get(types.$project-font-type-tokens, $type-token);\n // Only output if the font type has an assigned typeface token\n @if map.get($this-font-map, \"typeface-token\") {\n $this-font-token: map.get($this-font-map, \"typeface-token\");\n // Get the typeface metadata\n $this-typeface-data: map.get(\n typefaces.$all-typeface-tokens,\n $this-font-token\n );\n $this-name: map.get($this-typeface-data, \"display-name\");\n // If it's a system typeface, don't output the display name\n @if map.has-key($this-typeface-data, \"system-font\") {\n $output-display-name: false;\n // @debug \"it's a system font\";\n }\n // If there's a custom stack, use it and output the display name\n @if map.get($this-font-map, \"custom-stack\") {\n $this-stack: map.get($this-font-map, \"custom-stack\");\n $output-display-name: true;\n // @debug \"it has a custom stack\";\n }\n // Otherwise, just get the token's default stack\n @else {\n $this-stack: general.map-deep-get(\n typefaces.$all-typeface-tokens,\n $this-font-token,\n \"stack\"\n );\n }\n // If the typeface has no display name (system fonts), don't output the display name\n @if not map.get($this-typeface-data, \"display-name\") {\n $output-display-name: false;\n }\n @if not $output-display-name {\n @return #{$this-stack};\n }\n @return string.unquote(\"#{$this-name}, #{$this-stack}\");\n }\n @return false;\n}\n\n// @debug get-font-stack(\"heading\");\n// @return Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif\n","/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../general\";\n@use \"../../variables/font-role-tokens\" as *;\n@use \"../../variables/font-type-tokens\" as *;\n\n@function get-typeface-token($font-token) {\n $this-token: $font-token;\n @if map.has-key($project-font-role-tokens, $font-token) {\n $this-token: map.get($project-font-role-tokens, $font-token);\n }\n @return general.map-deep-get(\n $project-font-type-tokens,\n $this-token,\n \"typeface-token\"\n );\n}\n\n// @debug get-typeface-token(\"sans\");\n// @return source-sans-pro\n// @debug get-typeface-token(\"heading\");\n// @return merriweather\n","/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"../../tokens\";\n@use \"../general\";\n@use \"../units\";\n\n@function normalize-type-scale($cap-height, $scale) {\n @if not $cap-height {\n @return false;\n }\n\n $this-scale: tokens.$system-base-cap-height *\n math.div(general.strip-unit($scale), $cap-height) * 1px;\n\n @return units.px-to-rem($this-scale);\n}\n\n// @debug normalize-type-scale(362px, 16px);\n// @return 1rem\n","/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../functions/general\";\n@use \"../../tokens/font\";\n\n@function system-type-scale($scale) {\n $scale: general.smart-quote($scale);\n\n @if not $scale {\n @return false;\n }\n\n @if not(map.has-key(font.$system-type-scale, $scale)) {\n @return general.error-not-token($scale, \"type scale\", $system-type-scale);\n }\n\n @return map.get(font.$system-type-scale, $scale);\n}\n\n// @debug system-type-scale(2);\n// @return 13px;\n","/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n$project-easing: 0.15s ease-in-out;\n","/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n\n// Deprecated in 3.0.0\n$output-all-utilities: true !default;","/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n\n// color() can have a 1, 2, or 3 arguments passed to it:\n//\n// [family]\n// ex: color('primary')\n// - the default in a theme palette family\n//\n// [family], [grade]\n// ex: color('red', 50)\n// - a standard system color\n// ex: color('accent-warm', 'light')\n// - a standard theme color\n// ex: color('primary', 'vivid')\n// - in theme colors, 'vivid' is considered a grade\n//\n// [family], [grade], [vivid]\n// ex: color('red', 50, 'vivid')\n// - a vivid system color\n// - only system colors required three arguments\n\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"../general\";\n@use \"get-system-color\" as *;\n\n@function advanced-color(\n $color-family: false,\n $color-grade: false,\n $color-variant: false\n) {\n // Convert any arglists into lists\n $color-family: if(\n meta.type-of($color-family) == \"arglist\",\n general.unpack($color-family),\n $color-family\n );\n\n // If $color-family is a list, color() had a variable\n // passed to it, and args need to be re-set with the\n // values from the $color-family list:\n @if meta.type-of($color-family) == \"list\" {\n @if list.length($color-family) > 2 {\n $color-variant: list.nth($color-family, 3);\n }\n $color-grade: list.nth($color-family, 2);\n $color-family: list.nth($color-family, 1);\n }\n\n // Set initial state of vars\n $color-family: general.smart-quote($color-family);\n $color-grade: general.smart-quote($color-grade);\n $color-variant: general.smart-quote($color-variant);\n\n // @debug '#{$color-family}: #{meta.type-of($color-family)}, #{$color-grade}: #{meta.type-of($color-grade)}, #{$color-variant}: #{meta.type-of($color-variant)}' ;\n\n // If there are no args, throw an error\n @if not $color-family {\n @error 'Include a color in the form [family], [grade], [vivid]';\n }\n\n // If the grade is a number, it's a system color\n // ex: ('red', 50)\n @if meta.type-of($color-grade) == \"number\" {\n @return get-system-color($color-family, $color-grade, $color-variant);\n }\n\n // non-number grades are associated with non-default theme colors\n // ex: ('base', 'darker')\n // default theme colors have no grade\n // ex: ('base')\n @if map.has-key($all-project-colors, $color-family) {\n @if not\n map.has-key(map.get($all-project-colors, $color-family), $color-grade)\n {\n @error '`#{$color-grade}` is not a valid grade of `#{$color-family}`. '\n + 'Valid grades: '\n + '#{map.keys(map.get($all-project-colors, $color-family))}';\n }\n } @else {\n @return general.error-not-token(\n $color-family,\n \"theme family\",\n $all-project-colors\n );\n }\n @return general.map-deep-get(\n $all-project-colors,\n $color-family,\n $color-grade\n );\n}\n\n// @debug advanced-color(\"red\", 50, \"vivid\");\n// @return #e52207;\n","/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-system\" as *;\n\n@function is-system-color-token($token) {\n @if map.has-key($system-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n\n// @debug is-system-color-token(\"red-cool-5v\");\n// @return true;\n","/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"../../tokens/color/shortcodes-color-project\" as *;\n\n@function is-theme-color-token($token) {\n @if map.has-key($project-color-shortcodes, $token) {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n\n@use \"sass:map\";\n\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n@use \"../general/error-not-token\" as *;\n@use \"../../tokens/color/assignments-theme-color\" as *;\n\n@function color-token-assignment($color-token) {\n @if is-system-color-token($color-token) {\n $system-token: $color-token;\n @return $system-token;\n }\n\n @if not is-theme-color-token($color-token) {\n @return error-not-token($color-token, \"color\");\n }\n\n $theme-token: $color-token;\n $theme-token-assignment: map.get($assignments-theme-color, $theme-token);\n @return $theme-token-assignment;\n}\n","/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../general/str-split\" as *;\n@use \"../general/to-number\" as *;\n\n@function decompose-color-token($token) {\n $separator: \"-\";\n $family: false;\n $grade: false;\n $variant: false;\n $exceptions: (\n \"black\": 100,\n \"white\": 0,\n );\n\n $token: if($token == \"ink\", \"base-darkest\", $token);\n // If there's no separator, set family and grade\n @if not string.index($token, $separator) {\n $family: $token;\n $grade: if(\n map.has-key($exceptions, $family),\n map.get($exceptions, $family),\n \"root\"\n );\n } @else {\n $split: str-split($token, $separator);\n $last: list.nth($split, list.length($split));\n // If the last string is over 3 char, it's a theme token\n @if string.length($last) > 3 {\n @if $last == \"vivid\" {\n $variant: \"vivid\";\n $grade: \"root\";\n } @else if $last == \"warm\" or $last == \"cool\" {\n $grade: \"root\";\n } @else {\n $grade: $last;\n }\n // Otherwise treat as system token\n } @else {\n // Determine if it's a vivid variant\n @if string.index($last, \"v\") {\n $variant: \"vivid\";\n $grade: string.slice($last, 1, (string.index($last, \"v\") - 1));\n } @else {\n $grade: $last;\n }\n // Make sure the grade is a number\n $grade: if(meta.type-of($grade) == \"string\", to-number($grade), $grade);\n }\n // Collect compound-word families\n $is-compound-family: false;\n @if list.length($split) ==\n 3 or\n list.index($split, \"warm\") or\n list.index($split, \"cool\")\n {\n $is-compound-family: true;\n }\n @if $is-compound-family {\n $family: list.nth($split, 1) + $separator + list.nth($split, 2);\n } @else {\n $family: list.nth($split, 1);\n }\n }\n @return $family, $grade, $variant;\n}\n\n// @debug decompose-color-token(\"accent-cool\");\n","/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-family($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $family: list.nth($split, 1);\n @return $family;\n}\n","/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"decompose-color-token\" as *;\n\n@function color-token-grade($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $grade: list.nth($split, 2);\n @return $grade;\n}\n","/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function is-color-token($token) {\n $is-color-token: if(map.has-key($all-color-shortcodes, $token), true, false);\n @return $is-color-token;\n}\n\n// @debug is-color-token(\"red-warm-50\");\n// @return true\n","// @TODO candidate for removal because of built-in math.pow()\n// https://sass-lang.com/documentation/modules/math#pow\n\n@use \"sass:math\";\n@use \"sass:meta\";\n\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n\n@function pow($number, $exponent) {\n @if (math.round($exponent) != $exponent) {\n @return exp($exponent * ln($number));\n }\n\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n\n/* factorial()\n----------------------------------------\n*/\n\n@function factorial($value) {\n $result: 1;\n\n @if $value == 0 {\n @return $result;\n }\n\n @for $index from 1 through $value {\n $result: $result * $index;\n }\n\n @return $result;\n}\n\n/* summation()\n----------------------------------------\n*/\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* exp-maclaurin()\n----------------------------------------\n*/\n@function exp-maclaurin($x, $n) {\n @return math.div(pow($x, $n), factorial($n));\n}\n\n@function exp($value) {\n @return summation(meta.get-function(\"exp-maclaurin\"), $value, 0, 100);\n}\n\n@function ln-maclaurin($x, $n) {\n @return math.div(pow(-1, $n + 1), $n) * (pow($x - 1, $n));\n}\n\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\n $sum: 0;\n\n @for $index from $initial to $limit {\n $sum: $sum + meta.call($iteratee, $input, $index);\n }\n\n @return $sum;\n}\n\n/* ln()\n----------------------------------------\n*/\n@function ln($value) {\n $ten-exp: 1;\n $ln-ten: 2.30258509;\n\n @while ($value > pow(10, $ten-exp)) {\n $ten-exp: $ten-exp + 1;\n }\n\n @return summation(\n meta.get-function(\"ln-maclaurin\"),\n math.div($value, pow(10, $ten-exp)),\n 1,\n 100\n ) + $ten-exp * $ln-ten;\n}\n","/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../math/pow\" as *;\n@use \"../../variables/luminance-values\" as *;\n\n@function luminance($color) {\n $lum: (list.nth($luminance-color-component-values, red($color) + 1) * 0.2126) +\n (list.nth($luminance-color-component-values, green($color) + 1) * 0.7152) +\n (list.nth($luminance-color-component-values, blue($color) + 1) * 0.0722);\n\n @return math.div(math.round($lum * 1000), 1000);\n}\n","/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n\n@use \"sass:color\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:string\";\n\n@use \"../general\";\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"color-token-assignment\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-color-token\" as *;\n@use \"luminance\" as *;\n\n@function calculate-grade($color-token) {\n $transparency-error: \"USWDS can't calculate the grade of a transparent color. Avoid using transparency in theme colors and text.\";\n $grade: null;\n $lum: null;\n $custom-color: false;\n $color-token-assignment: false;\n\n // Determine if the color is a custom color\n @if meta.type-of($color-token) == \"color\" {\n $custom-color: $color-token;\n } @else {\n $color-token-assignment: color-token-assignment($color-token);\n @if meta.type-of($color-token-assignment) == \"color\" {\n $custom-color: color-token-assignment($color-token);\n }\n }\n\n // If it's custom, compare its rLum to USWDS grade rLum ranges\n @if $custom-color {\n // If the color uses transparency, throw an error\n @if color.alpha($custom-color) != 1 {\n @return general.uswds-error($transparency-error);\n }\n $lum: luminance($custom-color);\n // Cycle through grades, knowing current AND next grade\n $our-grades: map.keys($system-color-grades);\n $grade-count: list.length($our-grades);\n @for $i from 1 through $grade-count {\n $this-grade: list.nth($our-grades, $i);\n $this-grade-min: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"min\"\n );\n $this-grade-max: general.map-deep-get(\n $system-color-grades,\n $this-grade,\n \"max\"\n );\n $next-grade: if($i < $grade-count, list.nth($our-grades, $i + 1), false);\n $next-grade-min: if(\n $next-grade,\n general.map-deep-get($system-color-grades, $next-grade, \"min\"),\n false\n );\n // If the lum fits the range, assign a USWDS grade\n // Otherwise, set a grade midway between two USWDS grades\n @if ($lum >= $this-grade-min) and ($lum <= $this-grade-max) {\n @return $this-grade;\n }\n @if ($lum > $this-grade-max) and ($lum < $next-grade-min) {\n $custom-grade-midpoint: math.div(($this-grade + $next-grade), 2);\n $custom-grade: $custom-grade-midpoint;\n @return $custom-grade;\n }\n }\n }\n\n @if not is-color-token($color-token-assignment) {\n @return general.error-not-token($color-token-assignment, \"color\");\n }\n\n $system-token: $color-token-assignment;\n $token-split: decompose-color-token($system-token);\n $token-family: color-token-family($token-split);\n // If the color uses transparency, throw an error\n @if string.index($token-family, \"transparent\") {\n @return general.uswds-error($transparency-error);\n }\n // Otherwise, return token grade\n $token-grade: color-token-grade($token-split);\n @return $token-grade;\n}\n\n// @debug calculate-grade(\"red-60v\");\n// @return 60;\n","/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n\n@use \"../general/error-not-token\" as *;\n@use \"is-system-color-token\" as *;\n@use \"is-theme-color-token\" as *;\n\n@function color-token-type($token) {\n $type: if(is-system-color-token($token), \"system\", false);\n @if not $type {\n $type: if(is-theme-color-token($token), \"theme\", false);\n }\n @if not $type {\n @return error-not-token($token, \"color\");\n }\n @return $type;\n}\n","/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n\n@use \"sass:meta\";\n@use \"sass:list\";\n\n@use \"./decompose-color-token\" as *;\n\n@function color-token-variant($color-token) {\n $split: if(\n meta.type-of($color-token) == \"list\",\n $color-token,\n decompose-color-token($color-token)\n );\n $variant: list.nth($split, 3);\n @return $variant;\n}\n","/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"calculate-grade\" as *;\n\n@function magic-number($grade-1, $grade-2) {\n $grade-1: if(\n meta.type-of($grade-1) == \"number\",\n $grade-1,\n calculate-grade($grade-1)\n );\n $grade-2: if(\n meta.type-of($grade-2) == \"number\",\n $grade-2,\n calculate-grade($grade-2)\n );\n $magic-number: math.abs($grade-1 - $grade-2);\n @return $magic-number;\n}\n\n// @debug magic-number(100, 30);\n// @return 70;\n\n// @debug magic-number(\"red-50\", \"red-10\")\n// @return 40\n","/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"../../variables/wcag-magic-numbers\" as *;\n\n@function wcag-magic-number($wcag-target) {\n $wcag-magic-number: map.get($system-wcag-magic-numbers, $wcag-target);\n @return $wcag-magic-number;\n}\n","/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n\n@use \"magic-number\" as *;\n@use \"wcag-magic-number\" as *;\n\n@function is-accessible-magic-number($grade-1, $grade-2, $wcag-target) {\n $target-magic-number: wcag-magic-number($wcag-target);\n $magic-number: magic-number($grade-1, $grade-2);\n @if $magic-number >= $target-magic-number {\n @return true;\n }\n @return false;\n}\n","/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n\n@use \"sass:string\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"../../variables/luminance-grade-ranges\" as *;\n@use \"../../variables/theme-color-grades\" as *;\n@use \"color-token-family\" as *;\n@use \"color-token-grade\" as *;\n@use \"color-token-type\" as *;\n@use \"color-token-assignment\" as *;\n@use \"decompose-color-token\" as *;\n@use \"color-token-variant\" as *;\n\n@function next-token($token, $direction) {\n $next-token: false;\n $type: color-token-type($token);\n $token-split: decompose-color-token($token);\n // 1. System case\n @if $type == \"system\" {\n // transparent tokens return don't have a next token\n @if $token == \"transparent\" {\n @return false;\n }\n // black and white tokens use the gray family for next\n $current-family: if(\n $token == \"white\" or $token == \"black\",\n \"gray\",\n color-token-family($token-split)\n );\n // black- and white-transparent tokens don't have a next\n @if string.index($current-family, \"-transparent\") {\n @return false;\n }\n $current-grade: color-token-grade($token-split);\n // Nothing can be darker than black or lighter than white\n @if $direction == \"darker\" and $current-grade == 100 {\n @return false;\n }\n @if $direction == \"lighter\" and $current-grade == 0 {\n @return false;\n }\n // Grades under 5 should be treated as 5\n @if $current-grade > 0 and $current-grade < 5 {\n $current-grade: 5;\n }\n $system-grade-list: map.keys($system-color-grades);\n $current-grade-index: list.index($system-grade-list, $current-grade);\n // Note: System grades go from darkest (100) to lightest (0)\n $next-grade: if(\n $direction == \"darker\",\n list.nth($system-grade-list, ($current-grade-index - 1)),\n list.nth($system-grade-list, ($current-grade-index + 1))\n );\n $output-grade: $next-grade;\n // Keep the same vivid variant as the parent\n // Note: Grade 90 has no vivid variant\n @if color-token-variant($token-split) == \"vivid\" and ($next-grade < 90) {\n $output-grade: $next-grade + \"v\";\n }\n // Use black and white tokens for grades 100 and 0...\n @if $next-grade == 100 {\n $next-token: \"black\";\n } @else if $next-grade == 0 {\n $next-token: \"white\";\n // ...Otherwise output token in expected form\n } @else {\n $next-token: $current-family + \"-\" + $output-grade;\n }\n // 2. Theme case\n } @else {\n $current-grade: color-token-grade($token-split);\n // Vivid theme token should be considered root for ordering\n $current-grade: if($current-grade == \"vivid\", \"root\", $current-grade);\n $current-family: color-token-family($token-split);\n // Ink should be considered base-darkest\n // TODO: Should it?\n @if $token == \"ink\" {\n $current-family: \"base\";\n $current-grade: \"darkest\";\n }\n // Black is darker than darkest\n @if $direction == \"darker\" and $current-grade == \"darkest\" {\n @return \"black\";\n }\n // White is lighter than lightest\n @if $direction == \"lighter\" and $current-grade == \"lightest\" {\n @return \"white\";\n }\n $theme-grade-list: map.keys($theme-color-grades);\n $current-grade-index: list.index($theme-grade-list, $current-grade);\n // Note: Theme grades go from `lightest` to `darkest`\n $next-grade: if(\n $direction == \"darker\",\n list.nth($theme-grade-list, ($current-grade-index + 1)),\n list.nth($theme-grade-list, ($current-grade-index - 1))\n );\n // Exclude `root` from token output\n @if $next-grade == \"root\" {\n @return $current-family;\n } @else {\n $next-token: $current-family + \"-\" + $next-grade;\n }\n // If the next color is set to false, use black/white instead\n @if not color-token-assignment($next-token) {\n @if $direction == \"darker\" {\n @return \"black\";\n }\n @if $direction == \"lighter\" {\n @return \"white\";\n }\n }\n }\n @return $next-token;\n}\n\n// @debug next-token(\"gray-10\", \"lighter\");\n// @return gray-5;\n\n// @debug next-token(\"red-80v\", \"darker\");\n// @return red-90;\n\n// @debug next-token(\"accent-warm\", \"lighter\");\n// @return accent-warm-light;\n\n// @debug next-token(\"white\", \"lighter\");\n// @return false;\n","/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@use \"../../settings\" as *;\n@use \"../../tokens/color\" as *;\n@use \"../general/get-default\" as *;\n@use \"../general/str-split\" as *;\n@use \"../general/remove\" as *;\n@use \"get-color-token-from-bg\" as *;\n@use \"calculate-grade\" as *;\n@use \"decompose-color-token\" as *;\n@use \"is-accessible-magic-number\" as *;\n@use \"next-token\" as *;\n\n@function get-link-tokens-from-bg(\n $bg-color: \"default\",\n $preferred-link-token: \"default\",\n $fallback-link-token: \"default\",\n $wcag-target: \"AA\",\n $context: false\n) {\n $context-text: if($context, \"[#{$context}] \", \"\");\n $is-default: false;\n $is-default-preferred: false;\n $is-default-fallback: false;\n $default-reverse: false;\n $default-standard: false;\n @if $bg-color == \"default\" {\n $bg-color: get-default(\"bg-color\");\n }\n @if $preferred-link-token == \"default\" {\n $preferred-link-token: get-default(\"preferred-link-token\");\n $default-reverse: true;\n }\n @if $fallback-link-token == \"default\" {\n $fallback-link-token: get-default(\"fallback-link-token\");\n $standard-reverse: true;\n }\n $bg-grade: calculate-grade($bg-color);\n $preferred-hover-token: false;\n $default-hover-token: false;\n $accessible-hover-token: false;\n $accessible-link-token: get-color-token-from-bg(\n $bg-color,\n $preferred-link-token,\n $fallback-link-token,\n $wcag-target,\n $context,\n $for: \"link\"\n );\n $accessible-link-grade: calculate-grade($accessible-link-token);\n // Get the hover color token\n // If link is lighter than bg set $is-reverse to true\n $is-reverse: if($accessible-link-grade < $bg-grade, true, false);\n // If using defaults, set the default hover\n // $link-kind is used for error messaging\n $link-kind: false;\n @if $is-reverse {\n @if $default-reverse {\n $default-hover-token: $theme-link-reverse-hover-color;\n $link-kind: \"default reverse\";\n }\n } @else if $default-standard {\n $default-hover-token: $theme-link-hover-color;\n $link-kind: \"default\";\n }\n @if $default-hover-token {\n $default-hover-grade: calculate-grade($default-hover-token);\n @if is-accessible-magic-number(\n $default-hover-grade,\n $bg-grade,\n $wcag-target\n )\n {\n $accessible-hover-token: $default-hover-token;\n }\n @if not $accessible-hover-token and $theme-show-compile-warnings {\n @warn \"#{$context-text}The #{$link-kind} link hover (`#{$default-hover-token}`) does not have #{$wcag-target} contrast on a #{$bg-color} background. Please update your project settings.\";\n }\n }\n @if not $accessible-hover-token {\n $direction: if($is-reverse, \"lighter\", \"darker\");\n $hover-token: next-token($accessible-link-token, $direction);\n // Use the next token, if it is valid\n @if $hover-token {\n $accessible-hover-token: $hover-token;\n // Otherwise use the token itself as hover, and warn.\n } @else {\n $accessible-hover-token: $accessible-link-token;\n @if $theme-show-compile-warnings {\n @warn \"#{$context-text}A `#{$accessible-hover-token}` link does not have #{$direction} hover available. Hover set to link color.\";\n }\n }\n }\n @return $accessible-link-token, $accessible-hover-token;\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"decompose-color-token\" as *;\n@use \"luminance\" as *;\n@use \"calculate-grade\" as *;\n@use \"../../variables/luminance-grade-ranges\" as *;\n\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n\n@function test-colors($map) {\n $exceptions: \"black\", \"white\", \"transparent\", \"black-transparent\",\n \"white-transparent\";\n\n @each $token, $value in $map {\n $family: list.nth(decompose-color-token($token), 1);\n $grade: list.nth(decompose-color-token($token), 2);\n\n @if not $value {\n // empty block\n } @else if not list.index($exceptions, $family) {\n $computed: calculate-grade($value);\n @debug \"Checked #{$family}-#{$grade}\";\n @if $grade <= 5 {\n // empty block\n } @else if $computed != $grade {\n @warn \"#{$token} (#{$value}) lum: #{luminance($value)} is not in the range #{map.get($system-color-grades, $grade)}\";\n }\n }\n }\n\n @return 1;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"../../functions/general\";\n\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n\n@function columns($number) {\n $options: \"auto\", \"fill\";\n $number: general.smart-quote($number);\n\n @if list.index($options, $number) {\n @return $number;\n }\n @if 12 % $number != 0 {\n @error '`#{$number}` must be a divisor of 12.';\n }\n $columns: math.div(12, $number);\n @return $columns;\n}\n\n// @debug columns(2);\n// @return 6;\n","/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n\n@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"./functions/general/map-collect\" as *;\n@use \"./functions/units/units\" as *;\n@use \"./functions/utilities/line-height\" as *;\n// TODO: ^^^ s/b \"functions/utilities/units\"\n\n// ? This file uses:\n// \"shortcodes-color-theme\";\n// \"shortcodes-color-state\";\n// \"shortcodes-color-basic\";\n// \"global\";\n// \"system-colors\";\n@use \"./tokens/color\" as *;\n\n@use \"./tokens/units/column-gaps\" as *;\n@use \"./tokens/units/spacing\" as *;\n@use \"./tokens/units/spacing-em\" as *;\n// TODO: ^^^ 'spacing'?\n\n@use \"./tokens/font/measure\" as *;\n// TODO: ^^^ 'typography'?\n\n@use \"./variables/border-radius\" as *;\n@use \"./variables/project-font-stacks\" as *;\n// TODO: ^^^ why 'project' and why not?\n\n@use \"./settings\" as *;\n\n$standard-colors: map-collect(\n $tokens-color-theme,\n $tokens-color-state,\n $tokens-color-global\n);\n\n$extended-colors: map-collect($system-colors, $tokens-color-basic);\n\n$partial-values: (\n zero-zero: (\n 0: 0,\n ),\n none: (\n \"none\": none,\n ),\n auto: (\n \"auto\": auto,\n ),\n full-percent: (\n \"full\": 100%,\n ),\n full-viewport-height: (\n \"viewport\": 100vh,\n ),\n full-viewport-width: (\n \"viewport\": 100vw,\n ),\n);\n\n$system-properties: (\n align-items: (\n standard: (\n \"align-start\": flex-start,\n \"align-end\": flex-end,\n \"align-center\": center,\n \"align-stretch\": stretch,\n \"align-baseline\": baseline,\n ),\n extended: (),\n ),\n align-self: (\n standard: (\n \"align-self-start\": flex-start,\n \"align-self-end\": flex-end,\n \"align-self-center\": center,\n \"align-self-stretch\": stretch,\n \"align-self-baseline\": baseline,\n ),\n extended: (),\n ),\n background-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"noValue\": 1px,\n )\n ),\n extended: (),\n ),\n border-color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n border-radius: (\n standard: $project-border-radius,\n extended:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\")\n ),\n ),\n border-style: (\n standard: (\n \"dashed\": dashed,\n \"dotted\": dotted,\n \"solid\": solid,\n ),\n extended: (),\n ),\n border-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n bottom: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n box-shadow: (\n standard: (\n \"none\": none,\n 1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),\n 2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),\n 3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),\n 4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),\n 5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),\n ),\n extended: (),\n ),\n breakpoints: (\n standard:\n map-collect(\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\")\n ),\n extended: (),\n ),\n circle: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n color: (\n standard: $standard-colors,\n extended: $extended-colors,\n ),\n cursor: (\n standard: (\n \"auto\": auto,\n \"default\": default,\n \"pointer\": pointer,\n \"wait\": wait,\n \"move\": move,\n \"not-allowed\": not-allowed,\n ),\n extended: (),\n ),\n display: (\n standard: (\n \"block\": block,\n \"flex\": flex,\n \"none\": none,\n \"inline\": inline,\n \"inline-block\": inline-block,\n \"inline-flex\": inline-flex,\n \"table\": table,\n \"table-cell\": table-cell,\n \"table-row\": table-row,\n ),\n extended: (),\n ),\n flex: (\n standard: (\n 1: 1 1 0%,\n 2: 2 1 0%,\n 3: 3 1 0%,\n 4: 4 1 0%,\n 5: 5 1 0%,\n 6: 6 1 0%,\n 7: 7 1 0%,\n 8: 8 1 0%,\n 9: 9 1 0%,\n 10: 10 1 0%,\n 11: 11 1 0%,\n 12: 12 1 0%,\n \"fill\": 1 1 0%,\n \"auto\": 0 1 auto,\n ),\n extended: (),\n ),\n flex-direction: (\n standard: (\n \"row\": row,\n \"column\": column,\n ),\n extended: (),\n ),\n flex-wrap: (\n standard: (\n \"wrap\": wrap,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n float: (\n standard: (\n \"left\": left,\n \"none\": none,\n \"right\": right,\n ),\n extended: (),\n ),\n font-family: (\n standard: $project-font-stacks,\n extended: (),\n ),\n font-feature-settings: (\n standard: (\n \"tabular\": string.unquote('\"tnum\" 1, \"kern\" 1'),\n \"no-tabular\": string.unquote('\"kern\" 1'),\n ),\n extended: (),\n ),\n font-style: (\n standard: (\n \"italic\": italic,\n \"no-italic\": normal,\n ),\n extended: (),\n ),\n font-weight: (\n standard: (\n \"thin\": $theme-font-weight-thin,\n \"light\": $theme-font-weight-light,\n \"normal\": normal,\n \"medium\": $theme-font-weight-medium,\n \"semibold\": $theme-font-weight-semibold,\n \"bold\": $theme-font-weight-bold,\n \"heavy\": $theme-font-weight-heavy,\n ),\n extended: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n ),\n ),\n gap: (\n standard:\n map-collect(\n $system-column-gaps,\n (\n \"sm\": $theme-column-gap-sm,\n \"md\": $theme-column-gap-md,\n \"lg\": $theme-column-gap-lg,\n )\n ),\n extended: (),\n ),\n height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n justify-content: (\n standard: (\n \"justify-center\": center,\n \"justify-start\": flex-start,\n \"justify-end\": flex-end,\n \"justify\": space-between,\n ),\n extended: (),\n ),\n left: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n letter-spacing: (\n standard: (\n \"ls-auto\": initial,\n \"ls-neg-3\": -0.03em,\n \"ls-neg-2\": -0.02em,\n \"ls-neg-1\": -0.01em,\n \"ls-1\": 0.025em,\n \"ls-2\": 0.1em,\n \"ls-3\": 0.15em,\n ),\n extended: (),\n function: (\n \"auto\": initial,\n -3: -0.03em,\n -2: -0.02em,\n -1: -0.01em,\n 1: 0.025em,\n 2: 0.1em,\n 3: 0.15em,\n ),\n ),\n line-height: (\n standard: (\n \"sans-1\": lh(\"sans\", 1),\n \"sans-2\": lh(\"sans\", 2),\n \"sans-3\": lh(\"sans\", 3),\n \"sans-4\": lh(\"sans\", 4),\n \"sans-5\": lh(\"sans\", 5),\n \"sans-6\": lh(\"sans\", 6),\n \"serif-1\": lh(\"serif\", 1),\n \"serif-2\": lh(\"serif\", 2),\n \"serif-3\": lh(\"serif\", 3),\n \"serif-4\": lh(\"serif\", 4),\n \"serif-5\": lh(\"serif\", 5),\n \"serif-6\": lh(\"serif\", 6),\n \"mono-1\": lh(\"mono\", 1),\n \"mono-2\": lh(\"mono\", 2),\n \"mono-3\": lh(\"mono\", 3),\n \"mono-4\": lh(\"mono\", 4),\n \"mono-5\": lh(\"mono\", 5),\n \"mono-6\": lh(\"mono\", 6),\n \"cond-1\": lh(\"cond\", 1),\n \"cond-2\": lh(\"cond\", 2),\n \"cond-3\": lh(\"cond\", 3),\n \"cond-4\": lh(\"cond\", 4),\n \"cond-5\": lh(\"cond\", 5),\n \"cond-6\": lh(\"cond\", 6),\n \"heading-1\": lh(\"heading\", 1),\n \"heading-2\": lh(\"heading\", 2),\n \"heading-3\": lh(\"heading\", 3),\n \"heading-4\": lh(\"heading\", 4),\n \"heading-5\": lh(\"heading\", 5),\n \"heading-6\": lh(\"heading\", 6),\n \"ui-1\": lh(\"ui\", 1),\n \"ui-2\": lh(\"ui\", 2),\n \"ui-3\": lh(\"ui\", 3),\n \"ui-4\": lh(\"ui\", 4),\n \"ui-5\": lh(\"ui\", 5),\n \"ui-6\": lh(\"ui\", 6),\n \"body-1\": lh(\"body\", 1),\n \"body-2\": lh(\"body\", 2),\n \"body-3\": lh(\"body\", 3),\n \"body-4\": lh(\"body\", 4),\n \"body-5\": lh(\"body\", 5),\n \"body-6\": lh(\"body\", 6),\n \"code-1\": lh(\"code\", 1),\n \"code-2\": lh(\"code\", 2),\n \"code-3\": lh(\"code\", 3),\n \"code-4\": lh(\"code\", 4),\n \"code-5\": lh(\"code\", 5),\n \"code-6\": lh(\"code\", 6),\n \"alt-1\": lh(\"alt\", 1),\n \"alt-2\": lh(\"alt\", 2),\n \"alt-3\": lh(\"alt\", 3),\n \"alt-4\": lh(\"alt\", 4),\n \"alt-5\": lh(\"alt\", 5),\n \"alt-6\": lh(\"alt\", 6),\n ),\n extended: (\n 1: 1,\n 2: 1.1,\n 3: 1.35,\n 4: 1.5,\n 5: 1.62,\n 6: 1.75,\n ),\n ),\n margin: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n margin-horizontal: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n margin-vertical: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing-em, \"small\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n max-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n max-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"none\"),\n map.get($partial-values, \"full-percent\")\n ),\n extended: (),\n ),\n measure: (\n standard: (\n 1: $system-measure-smaller,\n 2: $system-measure-small,\n 3: $system-measure-base,\n 4: $system-measure-large,\n 5: $system-measure-larger,\n 6: $system-measure-largest,\n \"none\": none,\n ),\n extended: (),\n ),\n min-height: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"full-viewport-height\")\n ),\n extended: (),\n ),\n min-width: (\n standard:\n map-collect(\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n opacity: (\n standard: (\n 0: 0,\n 10: 0.1,\n 20: 0.2,\n 30: 0.3,\n 40: 0.4,\n 50: 0.5,\n 60: 0.6,\n 70: 0.7,\n 80: 0.8,\n 90: 0.9,\n 100: 1,\n ),\n extended: (),\n ),\n order: (\n standard: (\n \"first\": -1,\n \"last\": 999,\n \"initial\": initial,\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3,\n 4: 4,\n 5: 5,\n 6: 6,\n 7: 7,\n 8: 8,\n 9: 9,\n 10: 10,\n 11: 11,\n ),\n extended: (),\n ),\n outline: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($partial-values, \"zero-zero\"),\n (\n \"05\": spacing-multiple(0.5),\n )\n ),\n extended: (),\n ),\n outline-color: (\n standard: map-collect($tokens-color-global),\n extended: $extended-colors,\n ),\n overflow: (\n standard: (\n \"hidden\": hidden,\n \"scroll\": scroll,\n \"auto\": auto,\n \"visible\": visible,\n ),\n extended: (),\n ),\n padding: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($partial-values, \"zero-zero\")\n ),\n extended: (),\n ),\n position: (\n standard: (\n \"absolute\": absolute,\n \"fixed\": fixed,\n \"relative\": relative,\n \"static\": static,\n \"sticky\": sticky,\n ),\n extended: (),\n ),\n right: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n square: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\")\n ),\n extended: (),\n ),\n text-align: (\n standard: (\n \"center\": center,\n \"left\": left,\n \"justify\": justify,\n \"right\": right,\n ),\n extended: (),\n ),\n text-decoration: (\n standard: (\n \"strike\": line-through,\n \"underline\": underline,\n \"no-underline\": none,\n \"no-strike\": none,\n ),\n extended: (),\n ),\n text-decoration-color: (\n standard: map-collect($standard-colors, map.get($partial-values, \"auto\")),\n extended: $extended-colors,\n ),\n text-indent: (\n standard:\n map-collect(\n map.get($partial-values, \"zero-zero\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"medium-negative\")\n ),\n extended: (),\n ),\n text-transform: (\n standard: (\n \"uppercase\": uppercase,\n \"no-uppercase\": none,\n \"lowercase\": lowercase,\n \"no-lowercase\": none,\n ),\n extended: (),\n ),\n top: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"smaller-negative\"),\n map.get($system-spacing, \"small-negative\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n vertical-align: (\n standard: (\n \"baseline\": baseline,\n \"bottom\": bottom,\n \"middle\": middle,\n \"sub\": sub,\n \"super\": super,\n \"tbottom\": text-bottom,\n \"ttop\": text-top,\n \"top\": top,\n ),\n extended: (),\n ),\n white-space: (\n standard: (\n \"pre\": pre,\n \"pre-line\": pre-line,\n \"pre-wrap\": pre-wrap,\n \"wrap\": normal,\n \"no-wrap\": nowrap,\n ),\n extended: (),\n ),\n width: (\n standard:\n map-collect(\n map.get($system-spacing, \"smaller\"),\n map.get($system-spacing, \"small\"),\n map.get($system-spacing, \"medium\"),\n map.get($system-spacing, \"large\"),\n map.get($system-spacing, \"larger\"),\n map.get($system-spacing, \"largest\"),\n map.get($partial-values, \"zero-zero\"),\n map.get($partial-values, \"full-percent\"),\n map.get($partial-values, \"auto\")\n ),\n extended: (),\n ),\n z-index: (\n standard: (\n \"auto\": auto,\n \"bottom\": -100,\n \"top\": 99999,\n 0: 0,\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n ),\n extended: (),\n ),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"../../functions/output/number-to-token\" as *;\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n\n@function get-uswds-value($property, $value...) {\n @if meta.type-of($value) == \"arglist\" and list.nth($value, 1) == override {\n @return list.nth($value, 2);\n }\n\n $value: list.nth($value, 1);\n $converted: number-to-token($value);\n $quoted-value: if(\n $converted,\n smart-quote($converted),\n smart-quote(list.nth($value, 1))\n );\n $our-standard-values: map-deep-get($system-properties, $property, standard);\n $our-extended-values: map-deep-get($system-properties, $property, extended);\n\n @if map.has-key($our-standard-values, $quoted-value) {\n $output: map.get($our-standard-values, $quoted-value);\n\n @if not $output {\n @if $theme-show-compile-warnings {\n @error '`#{$value}` is set as a `false` value '\n + 'for the #{$property} property in your project settings '\n + 'and will not output properly. '\n + 'Set the value of `#{$value}` in project settings.';\n }\n }\n\n @return $output;\n }\n\n @if map.has-key($our-extended-values, $quoted-value) {\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is an extended USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return map.get($our-extended-values, $quoted-value);\n }\n\n // TODO: what are these last two cases? Evaluate.\n @if not((meta.type-of($value) == \"number\") and not(math.is-unitless($value)))\n {\n @error '`#{$value}` is not a valid `#{$property}` token. '\n + 'You should correct this. Standard `#{$property}` tokens: '\n + ' #{map.keys($our-standard-values)}';\n }\n\n @if $theme-show-compile-warnings {\n @warn '`#{$value}` is not a USWDS `#{$property}` token. '\n + 'This is OK, but only components built with standard '\n + 'tokens can be accepted back into the system. '\n + 'Standard `#{$property}` values: #{map.keys($our-standard-values)}';\n }\n\n @return $value;\n}\n","@use \"../../functions/general/map-deep-get\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n\n@function get-standard-values($property) {\n @return map-deep-get($system-properties, $property, standard);\n}\n\n// @debug get-standard-values(\"measure\");\n// @return (1: 44ex, 2: 60ex, 3: 64ex, 4: 68ex, 5: 72ex, 6: 88ex, \"none\": none);\n","/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../../settings\" as *;\n@use \"../../functions/general\";\n@use \"../../tokens/color/shortcodes-color-all\" as *;\n\n@function color($value, $flags...) {\n $value: general.unpack($value);\n\n // Non-token colors may be passed with specific flags\n @if meta.type-of($value) == color {\n // override or set-theme will allow any color\n @if list.index($flags, override) or list.index($flags, set-theme) {\n // override + no-warn will skip warnings\n @if list.index($flags, no-warn) {\n @return $value;\n }\n\n @if $theme-show-compile-warnings {\n @warn 'Override: `#{$value}` is not a USWDS color token.';\n }\n\n @return $value;\n }\n }\n\n // False values may be passed through when setting theme colors\n @if $value == false {\n @if list.index($flags, set-theme) {\n @return $value;\n }\n }\n\n // Now, any value should be evaluated as a token\n\n $value: general.smart-quote($value);\n\n @if map.has-key($all-color-shortcodes, $value) {\n $our-color: map.get($all-color-shortcodes, $value);\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n\n // If we're using the theme flag, $project-color-shortcodes has not yet been set\n @if not list.index($flags, set-theme) {\n @if map.has-key($project-color-shortcodes, $value) {\n $our-color: (map.get($project-color-shortcodes, $value));\n @if $our-color == false {\n @error '`#{$value}` is a color that does not exist '\n + 'or is set to false.';\n }\n @return $our-color;\n }\n }\n\n @return general.error-not-token($value, \"color\");\n}\n\n// @debug color(\"orange-80v\");\n// @return #352313;\n// @debug color(\"primary-dark\");\n// @return #1a4480;\n// @debug color(\"primary-lightest\");\n// @return error: set to false;\n// @debug color(#f00);\n// @return error: not a valid token;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/border-radius\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n@use \"../../properties\" as *;\n\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n\n@function border-radius($value) {\n @if map.has-key($all-border-radius, $value) {\n @return map.get($all-border-radius, $value);\n } @else {\n @return error-not-token($value, \"border radius\", $all-border-radius);\n }\n}\n\n// @debug #{border-radius(2)};\n// @return 1rem;\n\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n\n@function font-weight($value) {\n @return get-uswds-value(font-weight, $value);\n}\n\n@function fw($value) {\n @return font-weight($value);\n}\n\n// @debug #{font-weight(\"light\")};\n// @return 300;\n\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n\n@function feature($value) {\n @return get-uswds-value(font-feature-settings, $value);\n}\n\n// @debug #{feature(\"tabular\")};\n// @return \"tnum\" 1, \"kern\" 1;\n\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n\n@function flex($value) {\n @return get-uswds-value(flex, $value);\n}\n\n// @debug #{flex(11)};\n// @return 11 1 0%;\n\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n\n@function font-family($value) {\n @return get-uswds-value(font-family, $value);\n}\n\n@function ff($value) {\n @return font-family($value);\n}\n\n@function family($value) {\n @return font-family($value);\n}\n\n// @debug #{font-family(\"sans\")};\n// @return Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif\n\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function letter-spacing($value) {\n $lh-map: map.get($system-properties, \"letter-spacing\");\n $fn-map: map.get($lh-map, function);\n @if map.has-key($fn-map, $value) {\n @return map.get($fn-map, $value);\n }\n @if meta.type-of($value) == \"number\" {\n @error '`#{$value}` is a not a valid letter-spacing token. '\n + 'Valid letter-spacing tokens: #{map.keys($fn-map)}';\n }\n @return get-uswds-value(\"letter-spacing\", $value);\n}\n\n@function ls($value) {\n @return letter-spacing($value);\n}\n\n// @debug #{letter-spacing(\"ls-3\")};\n// @return 0.15em;\n\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n\n@function measure($value) {\n @return get-uswds-value(measure, $value);\n}\n\n// @debug #{measure(2)};\n// @return 60ex;\n\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n\n@function opacity($value) {\n @return get-uswds-value(opacity, $value);\n}\n\n// @debug #{opacity(30)};\n// @return 0.3;\n\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n\n@function order($value) {\n @return get-uswds-value(order, $value);\n}\n\n// @debug #{order(last)};\n// @return 999;\n\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n\n@function radius($value) {\n @return get-uswds-value(border-radius, $value);\n}\n\n// @debug #{radius(lg)};\n// @return 0.5rem;\n\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n\n@function font-size($family, $scale, $force: false) {\n $our-family: smart-quote($family);\n $our-scale: smart-quote($scale);\n\n @if not(map.has-key($project-cap-heights, $our-family)) {\n @return error-not-token($our-family, \"font family\", $project-cap-heights);\n }\n @if not(map.get($all-type-scale, $our-scale)) {\n @return error-not-token($our-scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $our-family);\n $this-scale: map.get($all-type-scale, $our-scale);\n\n @if not $force {\n @if not($this-scale and $this-cap) {\n @error 'The scale `#{$our-scale}` is disabled '\n + 'in your project\\'s theme settings. '\n + 'Set its value to `true` to use this family.';\n }\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n@function fs($family, $scale) {\n @return font-size($family, $scale);\n}\n\n@function size($family, $scale) {\n @return font-size($family, $scale);\n}\n\n// @debug #{font-size(\"serif\", \"3xs\")};\n// @return 0.79rem;\n\n// @debug #{font-size(\"serif\", \"4xs\")};\n// @return 4xs is not a valid USWDS font scale token\n\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n\n@function z-index($value) {\n @return get-uswds-value(z-index, $value);\n}\n\n@function z($value) {\n @return z-index($value);\n}\n\n// @debug #{z(\"top\")};\n// @return 99999;\n","@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../../functions/general/smart-quote\" as *;\n@use \"../../functions/general/error-not-token\" as *;\n@use \"../../functions/font/normalize-type-scale\" as *;\n@use \"../../variables/project-cap-heights\" as *;\n@use \"../../variables/type-scale\" as *;\n\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n\n@function utility-font($family, $scale) {\n @if not(map.has-key($project-cap-heights, $family)) {\n @return error-not-token($family, \"font family\", $project-cap-heights);\n }\n\n $quote-scale: smart-quote($scale);\n @if not(map.get($all-type-scale, $quote-scale)) {\n @return error-not-token($scale, \"font scale\", $all-type-scale);\n }\n\n $this-cap: map.get($project-cap-heights, $family);\n $this-scale: map.get($all-type-scale, $quote-scale);\n\n @if not $this-scale and $this-cap {\n @return false;\n }\n\n @return normalize-type-scale($this-cap, $this-scale);\n}\n\n// @debug utility-font(\"cond\", \"2xs\");\n// @return false;\n\n// @debug utility-font(\"sans\", \"sm\");\n// @return 1.06rem;\n","@use \"../../functions\" as *;\n\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n\n@mixin u-font-family($family) {\n font-family: ff($family);\n}\n\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font-size($family, $scale) {\n font-size: font-size($family, $scale);\n}\n\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n\n@mixin u-font($family, $scale) {\n font-family: ff($family);\n font-size: font-size($family, $scale);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: both;\n\n * + & {\n margin-top: 1.5em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n// typeset element mixins\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: 0;\n margin-top: 0;\n max-width: measure($theme-text-measure);\n\n * + & {\n margin-top: 1em; // TODO: add as var to settings?\n }\n\n + * {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","/* stylelint-disable max-nesting-depth */\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../settings\" as *;\n@use \"../properties\" as *;\n@use \"../functions\" as *;\n@use \"../variables/separator\" as *;\n@use \"./helpers\" as *;\n\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n\n@mixin render-pseudoclass(\n $utility,\n $pseudoclass,\n $selector,\n $property,\n $value,\n $media-prefix\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $this-mq: null;\n\n .#{$media-prefix}#{$pseudoclass}#{$separator}#{ns(\"utility\")}#{$selector}:#{$pseudoclass} {\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n }\n}\n\n// utility-feature? utility-property\n@mixin add-utility-declaration($declaration, $utility-type, $important) {\n @each $ext-prop, $ext-value in map.get($declaration, $utility-type) {\n #{$ext-prop}: string.unquote(\"#{$ext-value}#{$important}\");\n }\n}\n\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n\n@mixin render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-props,\n $media-key\n) {\n $important: if($utilities-use-important, \" !important\", null);\n $media-prefix: null;\n $value-is-map: if(meta.type-of($val-props) == \"map\", true, false);\n\n @if $media-key {\n $media-prefix: #{$media-key}#{$separator};\n }\n\n .#{$media-prefix}#{ns(\"utility\")}#{$selector} {\n @if $value-is-map and map.has-key($val-props, extend) {\n @include add-utility-declaration($val-props, extend, $important);\n }\n\n @if $value-is-map and map.has-key($val-props, extends) {\n @extend %#{map.get($val-props, extends)};\n }\n\n @each $this-property in $property {\n #{$this-property}: string.unquote(\"#{$value}#{$important}\");\n }\n\n @if map.has-key($utility, extend) {\n @include add-utility-declaration($utility, extend, $important);\n }\n }\n\n // Add the pseudoclass variants, if applicable\n\n @if map-deep-get($utility, settings, hover) {\n @include render-pseudoclass(\n $utility,\n hover,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, active) {\n @include render-pseudoclass(\n $utility,\n active,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, visited) {\n @include render-pseudoclass(\n $utility,\n visited,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n @if map-deep-get($utility, settings, focus) {\n @include render-pseudoclass(\n $utility,\n focus,\n $selector,\n $property,\n $value,\n $media-prefix\n );\n }\n\n // And add the responsive prefixes, if applicable\n\n /*\n @if map-deep-get($utility, settings, responsive) {\n @include render-media-queries(\n $utility,\n $selector,\n $property,\n $value,\n $val-props\n );\n }\n */\n}\n\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n\n@mixin these-utilities($utilities, $media-key: false) {\n // loop through the $utilities\n @each $utility-name, $utility in $utilities {\n // Check to see if the utility is in the output uselist\n @if ($output-these-utilities == \"default\") or list.index($output-these-utilities, $utility-name) {\n // Only do this if the the utility is meant to output\n @if not($media-key) or\n ($media-key and map-deep-get($utility, settings, responsive))\n {\n @if map-deep-get($utility, settings, output) {\n // set intital variants\n // $property-default is a single value for all these utilities\n\n $base-props: null;\n $modifier: null;\n $selector: null;\n $property-default: map.get($utility, property);\n $property: null;\n $value: null;\n $our-modifiers: ();\n $b: null;\n $v: null;\n $mv: null;\n $val-props: ();\n $no-value: false;\n\n $b: map.get($utility, base);\n\n // Each utility rule takes a value, so let's start here\n // and begin building.\n\n // -------- For each value in utility.values ----------\n\n @each $val-key, $val-value in map.get($utility, values) {\n // If $val-value == null, or if $val-value is a map and\n // the content key or the dependency key has a null value\n // set $val-value to `false`...\n\n @if meta.type-of($val-value) == \"map\" {\n @if not map.get($val-value, content) {\n $val-value: false;\n } @else if\n map.has-key($val-value, dependency) and not\n map.get($val-value, dependency)\n {\n $val-value: false;\n }\n }\n\n // ...so we can skip building this rule altogether.\n // So, if $val-value is _not_ false...\n\n @if $val-value {\n // Set the value of our rule.\n // If its a map, use val-value.content.\n\n $val-slug: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"slug\"),\n $val-key\n );\n\n $value: if(\n meta.type-of($val-value) == \"map\",\n map.get($val-value, \"content\"),\n $val-value\n );\n\n @if $val-slug == \"\" or smart-quote($val-slug) == \"noValue\" {\n $no-value: true;\n }\n\n // Add any appended values...\n\n @if map.get($utility, valueAppend) {\n $value: $value + map.get($utility, valueAppend);\n }\n\n // ...or prepended values.\n\n @if map.get($utility, valuePrepend) {\n $value: map.get($utility, valuePrepend) + $value;\n }\n\n // And we'll set the $v as $val-slug for use in\n // constructing the selector (.$b-$m-$v).\n\n $v: $val-slug;\n\n // -------- Start of Modifiers ----------\n\n // Now we'll check for modifiers and loop through them\n // to get the props we need to build our rule.\n\n // Modifiers are held in a MAP,\n // where each individual modifer has the keypair\n // [slug]:[value]\n\n // So, check for modifiers.\n\n @if map.get($utility, modifiers) {\n // If there are modifiers, capture them as $our-modifiers.\n\n $our-modifiers: map.get($utility, modifiers);\n } @else {\n // If there aren't, build a dummy so we can keep\n // all our build in the same loop.\n\n $our-modifiers: (\n \"slug\": null,\n );\n }\n\n // OK! C'mon, let's loop!\n // https://www.youtube.com/watch?v=X9i2i07wPUw\n\n // -------- For each modifier in $our-modifiers ----------\n\n @each $mod-key, $mod-val in $our-modifiers {\n $property: if(\n $mod-val == null or $mod-val == \"\",\n $property-default,\n multi-cat($property-default, $mod-val)\n );\n\n // Now we go through to set the $selector.\n\n // If mod-props.slug is noModifier...\n\n @if $mod-key ==\n \"\" or\n $mod-key ==\n slug or\n smart-quote($mod-key) ==\n \"noModifier\"\n {\n // First, we can test to see if the base $b is null\n\n @if not $b {\n // If it _is_ null, the rule's selector is $v.\n\n $selector: $v;\n\n // if the value is noValue ('')\n } @else if $no-value {\n // selector is the base only\n\n $selector: $b;\n } @else {\n // otherwise, selctor is joined with a hyphen.\n\n $selector: $b + \"-\" + $v;\n\n // Nice! We just took care of the non-modifier cases!\n }\n }\n\n // If there _is_ a modifier...\n\n @else {\n $mv: if($no-value, $mod-key, $mod-key + \"-\" + $v);\n\n // Once we have $mv, test for $b\n // and build the selector as before.\n\n $selector: if($b == null, $mv, $b + \"-\" + $mv);\n }\n\n // finished setting modifier vars\n\n // Hey. Did we just finish $selector?\n // And do we also have $property and $value?\n // We do?!?!?! We do!\n\n // FINALLY, 'BUILD THE RULE, MAX!'\n // https://www.youtube.com/watch?v=R3Igz5SfBCE\n\n @include render-utility(\n $utility,\n $selector,\n $property,\n $value,\n $val-value,\n $media-key\n );\n } // end the modifier loop\n } // end the null value conditional\n } // end the value loop\n } // end the output conditional\n }\n } // end the uselist conditional\n } // end the utility loop\n // (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧\n}\n\n@mixin render-utilities-in($utilities) {\n @include these-utilities($utilities);\n\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @each $media-key, $media-value in $our-breakpoints {\n @if map.get($theme-utility-breakpoints, $media-key) {\n @include at-media($media-key) {\n @include these-utilities($utilities, $media-key);\n }\n }\n }\n}\n\n/* stylelint-enable */\n","/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n\n@use \"settings\" as *;\n\n/* prettier-ignore */\n$uswds-notifications:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A \\2709 USWDS Notifications\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A 3.0.0\"\n+ \"\\A We deprecated the $output-all-utilities setting.\"\n+ \"\\A Control utility output with $output-these-utilities.\"\n+ \"\\A See designsystem.digital.gov/documentation/settings for more.\";\n\n/* prettier-ignore */\n$uswds-notification-disable-message:\n \"\\A\"\n+ \"\\A --------------------------------------------------------------------\"\n+ \"\\A These are notifications from the USWDS team, not necessarily a\"\n+ \"\\A problem with your code.\"\n+ \"\\A\"\n+ \"\\A Disable notifications using `$theme-show-notifications: false`.\"\n+ \"\\A --------------------------------------------------------------------\\A\";\n\n@if $theme-show-notifications {\n @warn \"#{$uswds-notifications}\"\n + \"#{$uswds-notification-disable-message}\";\n}\n","@use \"../settings\" as *;\n@use \"../functions/utilities\" as *;\n@use \"../mixins/utilities/margin\" as *;\n\n%usa-list {\n @include u-margin-y(1em);\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n padding-left: 3ch;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ul,\n ol {\n margin-top: 0.25em;\n }\n}\n\n%usa-list-item {\n margin-bottom: 0.25em;\n max-width: measure($theme-text-measure);\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Adds margin either l/r(x) or t/b(y)\n\n@mixin margin-n($side, $value...) {\n $value: unpack($value);\n @if $side == all {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin: get-uswds-value(margin, $value...) #{$important};\n } @else if $side == x {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-left: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n margin-right: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n } @else if $side == y {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-bottom: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n margin-top: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == t {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-top: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == r {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-right: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n } @else if $side == b {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-bottom: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == l {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-left: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n }\n}\n\n@mixin u-margin($value...) {\n @include margin-n(all, $value...);\n}\n\n@mixin u-margin-x($value...) {\n @include margin-n(x, $value...);\n}\n\n@mixin u-margin-y($value...) {\n @include margin-n(y, $value...);\n}\n\n@mixin u-margin-top($value...) {\n @include margin-n(t, $value...);\n}\n\n@mixin u-margin-right($value...) {\n @include margin-n(r, $value...);\n}\n\n@mixin u-margin-bottom($value...) {\n @include margin-n(b, $value...);\n}\n\n@mixin u-margin-left($value...) {\n @include margin-n(l, $value...);\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (\":\") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: 'example-font-token';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n'georgia'\n'helvetica'\n'merriweather'\n'open-sans'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n'system'\n'tahoma'\n'verdana'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don't need to include the\nfont's display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: 'source-sans-pro';\n$theme-font-sans-custom-stack: \"Helvetica Neue\", Helvetica, Arial, sans;\n\nOutput:\nfont-family: \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n'merriweather'\n'public-sans'\n'roboto-mono'\n'source-sans-pro'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .ttf, .woff, and .woff2\n ExampleSerif-Normal.ttf\n ExampleSerif-Normal.woff\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: 'custom/example-serif',\n roman: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-Light',\n 400: 'ExampleSerif-Normal',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-Bold',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: 'ExampleSerif-LightItalic',\n 400: 'ExampleSerif-Italic',\n 500: false,\n 600: false,\n 700: 'ExampleSerif-BoldItalic',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n'cond'\n'icon'\n'lang'\n'mono'\n'sans'\n'serif'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project's type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n'ui'\n'heading'\n'body'\n'code'\n'alt'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default(\"bg-color\")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin's props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) -->\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --> '05'\n -1px --> 'neg-1px'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face's optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return \"vivid\" as the\nvariant.\nIf neither grade nor variant exists,\nreturns 'null'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family(\"accent-warm-vivid\")\n> \"accent-warm\"\ncolor-token-family(\"red-50v\")\n> \"red\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"red\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade(\"accent-warm\")\n> \"root\"\ncolor-token-grade(\"accent-warm-vivid\")\n> \"root\"\ncolor-token-grade(\"accent-warm-darker\")\n> \"darker\"\ncolor-token-grade(\"red-50v\")\n> 50\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\nluminance()\n----------------------------------------\nReturns the luminance of `$color` as a float (between 0 and 1)\n1 is pure white, 0 is pure black\n\n@param {Color} $color - Color\n@return {Number}\n@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: \"system\" | \"theme\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: \"vivid\" | false\ncolor-token-variant(\"accent-warm\")\n> false\ncolor-token-variant(\"accent-warm-vivid\")\n> \"vivid\"\ncolor-token-variant(\"red-50v\")\n> \"vivid\"\ncolor-token-variant((\"red\", 50, \"vivid\"))\n> \"vivid\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number(\"red-50\", \"red-10\")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n\"AA\"\n\"AA-Large\"\n\"AAA\"\nwcag-magic-number(\"AA\")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, \"AA\")\n> false\nis-accessible-magic-number(10, 60, \"AA\")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next \"darker\" or \"lighter\" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token(\"accent-warm\", \"lighter\")\n> \"accent-warm-light\"\nnext-token(\"gray-10\", \"lighter\")\n> \"gray-5\"\nnext-token(\"gray-5\", \"lighter\")\n> \"white\"\nnext-token(\"white\", \"lighter\")\n> false\nnext-token(\"red-50v\", \"darker\")\n> \"red-60v\"\nnext-token(\"red-50\", \"darker\")\n> \"red-60\"\nnext-token(\"red-80v\", \"darker\")\n> \"red-90\"\nnext-token(\"red-90\", \"darker\")\n> \"black\"\nnext-token(\"white\", \"darker\")\n> \"gray-5\"\nnext-token(\"black\", \"lighter\")\n> \"gray-90\"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n \"black\",\n \"red-60\",\n \"red-10\",\n \"AA\")\n> \"red-10\", \"red-5\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-60v\",\n \"red-10v\",\n \"AA-large\")\n> \"red-60v\", \"red-50v\"\nget-link-tokens-from-bg(\n \"black\",\n \"red-5v\",\n \"red-60v\",\n \"AA\")\n> \"red-5v\", \"white\"\nget-link-tokens-from-bg(\n \"black\",\n \"white\",\n \"red-60v\",\n \"AA\")\n> \"white\", \"white\"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --> 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a 'interpolation near\noperators will be simplified in a\nfuture version of Sass' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\nol, ul {\n margin-bottom: 1em;\n margin-top: 1em;\n line-height: 1.5;\n padding-left: 3ch;\n}\nol:last-child, ul:last-child {\n margin-bottom: 0;\n}\nol ul, ul ul,\nol ol,\nul ol {\n margin-top: 0.25em;\n}\n\nli {\n margin-bottom: 0.25em;\n max-width: 68ex;\n}\nli:last-child {\n margin-bottom: 0;\n}\n\n/* stylelint-disable */\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Roboto Mono Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format(\"woff2\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff) format(\"woff\"), url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-light-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Source Sans Pro Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format(\"woff2\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff) format(\"woff\"), url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: normal;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 300;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 400;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Merriweather Web\";\n font-style: italic;\n font-weight: 700;\n font-display: fallback;\n src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format(\"woff2\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format(\"woff\"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format(\"truetype\");\n}\n/* stylelint-enable */\n.usa-button {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 0.9;\n color: white;\n background-color: #005ea2;\n appearance: none;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-block;\n font-weight: 700;\n margin-right: 0.5rem;\n padding: 0.75rem 1.25rem;\n text-align: center;\n text-decoration: none;\n width: 100%;\n}\n@media all and (min-width: 30em) {\n .usa-button {\n width: auto;\n }\n}\n.usa-button:visited {\n color: white;\n}\n.usa-button:hover, .usa-button.usa-button--hover {\n color: white;\n background-color: #1a4480;\n border-bottom: 0;\n text-decoration: none;\n}\n.usa-button:active, .usa-button.usa-button--active {\n color: white;\n background-color: #162e51;\n}\n.usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus {\n outline-offset: 0.25rem;\n}\n.usa-button:disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--accent-cool {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:visited {\n color: #1b1b1b;\n background-color: #00bde3;\n}\n.usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover {\n color: #1b1b1b;\n background-color: #28a0cb;\n}\n.usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active {\n color: white;\n background-color: #07648d;\n}\n\n.usa-button--accent-warm {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:visited {\n color: #1b1b1b;\n background-color: #fa9441;\n}\n.usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover {\n color: white;\n background-color: #c05600;\n}\n.usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active {\n color: white;\n background-color: #775540;\n}\n\n.usa-button--outline {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #005ea2;\n color: #005ea2;\n}\n.usa-button--outline:visited {\n color: #005ea2;\n}\n.usa-button--outline:hover, .usa-button--outline.usa-button--hover {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #1a4480;\n color: #1a4480;\n}\n.usa-button--outline:active, .usa-button--outline.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #162e51;\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse {\n box-shadow: inset 0 0 0 2px #dfe1e2;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover {\n box-shadow: inset 0 0 0 2px #f0f0f0;\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px white;\n color: white;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited {\n color: #dfe1e2;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover {\n color: #f0f0f0;\n}\n.usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active {\n color: white;\n}\n\n.usa-button--base {\n color: white;\n background-color: #71767a;\n}\n.usa-button--base:hover, .usa-button--base.usa-button--hover {\n color: white;\n background-color: #565c65;\n}\n.usa-button--base:active, .usa-button--base.usa-button--active {\n color: white;\n background-color: #3d4551;\n}\n\n.usa-button--secondary {\n color: white;\n background-color: #d83933;\n}\n.usa-button--secondary:hover, .usa-button--secondary.usa-button--hover {\n color: white;\n background-color: #b50909;\n}\n.usa-button--secondary:active, .usa-button--secondary.usa-button--active {\n color: white;\n background-color: #8b0a03;\n}\n\n.usa-button--big {\n border-radius: 0.25rem;\n font-size: 1.46rem;\n padding: 1rem 1.5rem;\n}\n\n.usa-button--disabled {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background-color: #c9c9c9;\n color: white;\n}\n.usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus {\n background-color: #c9c9c9;\n border: 0;\n box-shadow: none;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: transparent;\n}\n.usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus,\n.usa-button--outline-inverse-disabled:hover,\n.usa-button--outline-inverse-disabled.usa-button--hover,\n.usa-button--outline-inverse-disabled:active,\n.usa-button--outline-inverse-disabled.usa-button--active,\n.usa-button--outline-inverse-disabled:focus,\n.usa-button--outline-inverse-disabled.usa-focus,\n.usa-button--outline:disabled:hover,\n.usa-button--outline:disabled.usa-button--hover,\n.usa-button--outline:disabled:active,\n.usa-button--outline:disabled.usa-button--active,\n.usa-button--outline:disabled:focus,\n.usa-button--outline:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus,\n.usa-button--outline-inverse:disabled:hover,\n.usa-button--outline-inverse:disabled.usa-button--hover,\n.usa-button--outline-inverse:disabled:active,\n.usa-button--outline-inverse:disabled.usa-button--active,\n.usa-button--outline-inverse:disabled:focus,\n.usa-button--outline-inverse:disabled.usa-focus {\n background-color: transparent;\n border: 0;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: inset 0 0 0 2px #c9c9c9;\n color: #c9c9c9;\n}\n.usa-button--outline-disabled.usa-button--inverse,\n.usa-button--outline:disabled.usa-button--inverse {\n background-color: transparent;\n box-shadow: inset 0 0 0 2px #71767a;\n color: #71767a;\n}\n\n.usa-button--unstyled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n.usa-button--unstyled:visited {\n color: #54278f;\n}\n.usa-button--unstyled:hover {\n color: #1a4480;\n}\n.usa-button--unstyled:active {\n color: #162e51;\n}\n.usa-button--unstyled:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\n.usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled {\n color: #c9c9c9;\n}\n.usa-button--unstyled.usa-button--hover {\n color: #1a4480;\n}\n.usa-button--unstyled.usa-button--active {\n color: #162e51;\n}\n\n* {\n transition-duration: 200ms;\n transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform;\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important;\n text-shadow: none !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n[id] {\n scroll-margin-top: 1em;\n}\n\nhtml {\n font-feature-settings: \"kern\" 1;\n font-kerning: normal;\n font-size: 100%;\n min-height: 100%;\n}\n\nbody {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.5;\n background-color: #fff;\n color: #1b1b1b;\n margin: 0;\n padding: 0;\n word-wrap: break-word;\n}\nbody.has-open-mobile-menu {\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n}\n\n@media print {\n nav {\n display: none;\n }\n}\n\nsummary {\n display: list-item;\n}\n\niframe {\n border: 0;\n max-width: 100%;\n}\n@media print {\n iframe {\n display: none;\n }\n}\n\nh6,\n.h6, h5,\n.h5, h4,\n.h4, h3,\n.h3,\n.web-area-title, h2,\n.h2, h1 {\n margin-bottom: 0;\n margin-top: 0;\n clear: none;\n margin-bottom: 1rem;\n clear: none;\n hyphens: none;\n text-rendering: optimizeLegibility;\n}\n* + h6,\n* + .h6, * + h5,\n* + .h5, * + h4,\n* + .h4, * + h3,\n* + .h3,\n* + .web-area-title, * + h2,\n* + .h2, * + h1 {\n margin-top: 1em;\n}\n@media print {\n h6,\n.h6, h5,\n.h5, h4,\n.h4, h3,\n.h3,\n.web-area-title, h2,\n.h2, h1 {\n orphans: 3;\n page-break-after: avoid;\n widows: 3;\n }\n h6::after,\n.h6::after, h5::after,\n.h5::after, h4::after,\n.h4::after, h3::after,\n.h3::after,\n.web-area-title::after, h2::after,\n.h2::after, h1::after {\n display: inline-block;\n }\n}\n\nh1 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 2.44rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h1 {\n font-size: 1.95rem;\n }\n}\n\nh2,\n.h2 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.95rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h2,\n.h2 {\n font-size: 1.34rem;\n }\n}\n\nh3,\n.h3,\n.web-area-title {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.34rem;\n font-weight: 700;\n line-height: 1.2;\n}\n@media (min-width: max-width 40rem) {\n h3,\n.h3,\n.web-area-title {\n font-size: 1.1rem;\n }\n}\n\nh4,\n.h4 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 0.98rem;\n font-weight: 700;\n line-height: 1.2;\n}\n\nh5,\n.h5 {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 0.91rem;\n font-weight: 700;\n line-height: 1.2;\n}\n\nh6,\n.h6 {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 0.87rem;\n font-weight: normal;\n letter-spacing: 0.025em;\n line-height: 1.1;\n text-transform: uppercase;\n}\n\np {\n line-height: 1.5;\n margin-bottom: 1rem;\n margin-top: 0;\n}\n@media print {\n p {\n orphans: 3;\n widows: 3;\n }\n}\np:empty {\n margin: 0 !important;\n}\n\na {\n background-color: transparent;\n color: #005ea2;\n -webkit-text-decoration-skip: objects;\n}\na:visited {\n color: #54278f;\n}\na:hover, a:focus {\n color: #1a4480;\n}\na:active {\n color: #162e51;\n}\n@media print {\n a, a:visited {\n text-decoration: none;\n }\n a[href]::after {\n content: \" <\" attr(href) \">\";\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 10pt;\n font-weight: normal;\n text-transform: lowercase;\n }\n a[href^=\"/\"]::after {\n content: \" \";\n }\n a[href^=\"javascript:\"]::after, a[href^=\"mailto:\"]::after, a[href^=\"tel:\"]::after, a[href^=\"#\"]::after, a[href*=\"?\"]::after {\n content: \"\";\n }\n}\n\nabbr[title] {\n border-bottom: 1px dotted;\n text-decoration: none;\n}\n@media (min-width: max-width 40rem) {\n abbr[title] {\n border-bottom: 0;\n }\n abbr[title]::after {\n content: \" (\" attr(title) \")\";\n }\n}\nabbr:hover {\n cursor: help;\n}\n@media print {\n abbr[title] {\n border-bottom: 0;\n }\n abbr[title]::after {\n content: \" (\" attr(title) \")\";\n }\n}\n\ncite {\n color: #565c65;\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 0.93rem;\n font-style: normal;\n font-weight: normal;\n letter-spacing: 0.025em;\n line-height: 1.6;\n}\n\ndfn {\n font-style: normal;\n}\n\nins {\n text-decoration: none;\n}\n\nmark {\n background: #ff0;\n color: #000;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\nvar {\n font-style: normal;\n}\n\nblockquote {\n font-family: Merriweather Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", Georgia, Cambria, \"Times New Roman\", Times, serif;\n font-size: 1.1rem;\n font-weight: normal;\n line-height: 1.7;\n background-color: #fff;\n border-left: 0.5rem solid #00bde3;\n clear: both;\n margin: 0 0 1.5rem;\n padding: 1.25rem 0 1.25rem 1.25rem;\n}\nblockquote > :last-child {\n margin-bottom: 0;\n}\n* + blockquote {\n margin-top: 1.5rem;\n}\n\nblockquote cite {\n display: block;\n margin: 1rem 0;\n text-align: left;\n}\n\nblockquote p {\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\nblockquote cite em {\n border-left: 1px solid #71767a;\n font-weight: normal;\n margin-left: 0.25rem;\n padding-left: 0.5rem;\n}\n@media print {\n blockquote {\n page-break-inside: avoid;\n }\n}\n\npre {\n margin: 0 0 1rem;\n overflow: auto;\n}\n* + pre {\n margin-top: 1rem;\n}\n@media print {\n pre {\n page-break-inside: avoid;\n }\n}\n\nhr {\n border-top: solid #a9aeb1;\n border-width: 1px 0 0;\n box-sizing: content-box;\n height: 0;\n margin: 0 0 1.5rem;\n overflow: auto;\n}\n* + hr {\n margin-top: 1.5rem;\n}\n\naddress {\n font-style: normal;\n}\n\nul {\n list-style-type: disc;\n margin-top: 0;\n}\n[dir=rtl] ul {\n padding-left: 0;\n padding-right: 3ch;\n}\nul:last-child {\n margin-bottom: revert;\n}\nul ol,\nul ul {\n margin-top: 0.5rem;\n}\nul ul {\n list-style-type: circle;\n}\nul ul ul {\n list-style-type: square;\n}\n\nol {\n margin-top: 0;\n}\n[dir=rtl] ol {\n padding-left: 0;\n padding-right: 3ch;\n}\nol:last-child {\n margin-bottom: revert;\n}\nol ol,\nol ul {\n margin-top: 0.5rem;\n}\nol ol {\n list-style-type: lower-alpha;\n}\nol ol ol {\n list-style-type: lower-roman;\n}\n\nli {\n max-width: unset;\n}\n@media print {\n li {\n page-break-inside: avoid;\n }\n}\n\ndd {\n margin: 0 0 1rem 3ch;\n}\n[dir=rtl] dd {\n margin-left: 0;\n margin-right: 3ch;\n}\n\ndl {\n margin: 0 0 1rem;\n}\n\ntable {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.5;\n border-collapse: collapse;\n border-spacing: 0;\n color: #1b1b1b;\n margin: 1.25rem 0;\n text-align: left;\n /* stylelint-disable selector-class-pattern */\n /* stylelint-enable selector-class-pattern */\n}\ntable thead th {\n background-clip: padding-box;\n color: #1b1b1b;\n font-weight: 700;\n line-height: 1.3;\n}\ntable thead th,\ntable thead td {\n background-color: #dfe1e2;\n color: #1b1b1b;\n}\ntable tbody th {\n text-align: left;\n}\ntable th,\ntable td {\n background-color: white;\n border: 1px solid #1b1b1b;\n font-weight: normal;\n padding: 0.5rem 1rem;\n}\ntable caption {\n font-family: Source Sans Pro Web, \"Noto Sans Arabic\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN\", \"Noto Sans GU\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Helvetica Neue\", Helvetica, Arial, sans;\n font-size: 1rem;\n font-weight: 700;\n margin-bottom: 0.75rem;\n text-align: left;\n}\ntable th[data-sortable] {\n padding-right: 2.5rem;\n position: relative;\n}\ntable th[data-sortable]::after {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-bottom-width: 1px;\n bottom: 0;\n content: \"\";\n height: 0;\n left: 0;\n position: absolute;\n width: 100%;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button, table th[data-sortable][aria-sort=none] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:visited, table th[data-sortable][aria-sort=none] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:disabled, table th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=none] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button .usa-icon > g.unsorted {\n fill: #1b1b1b;\n}\ntable th[data-sortable]:not([aria-sort]) .usa-table__header__button:hover .usa-icon > g.unsorted, table th[data-sortable][aria-sort=none] .usa-table__header__button:hover .usa-icon > g.unsorted {\n fill: black;\n}\ntable th[data-sortable][aria-sort=descending], table th[data-sortable][aria-sort=ascending] {\n background-color: #97d4ea;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=descending] .usa-table__header__button:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable][aria-sort=descending] .usa-table__header__button .usa-icon > g.descending {\n fill: #1b1b1b;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: normal;\n margin: 0;\n padding: 0;\n text-align: left;\n height: 2rem;\n width: 2rem;\n background-position: center center;\n background-size: 1.5rem;\n color: #71767a;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n top: 50%;\n transform: translate(0, -50%);\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:visited {\n color: #54278f;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--hover, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-button--active, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled:focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled.usa-focus, table th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button:disabled, table th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--disabled {\n color: #c9c9c9;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--hover {\n color: #1a4480;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button.usa-button--active {\n color: #162e51;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon {\n height: 1.5rem;\n width: 1.5rem;\n vertical-align: middle;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g {\n fill: transparent;\n}\ntable th[data-sortable][aria-sort=ascending] .usa-table__header__button .usa-icon > g.ascending {\n fill: #1b1b1b;\n}\ntable thead th[aria-sort] {\n background-color: #97d4ea;\n color: #1b1b1b;\n}\ntable td[data-sort-active],\ntable th[data-sort-active] {\n background-color: #e1f3f8;\n color: #1b1b1b;\n}\n\n@media print {\n thead {\n display: table-header-group;\n }\n}\n\ntbody th {\n background-color: #f0f0f0;\n font-weight: 700;\n}\n\n@media print {\n tr {\n page-break-inside: avoid;\n }\n}\n\nbutton {\n overflow: visible;\n}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\ninput {\n line-height: normal;\n}\n\nlegend {\n border: 0;\n box-sizing: border-box;\n color: inherit;\n display: table;\n margin: 0;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\noptgroup {\n font-weight: 700;\n}\n\ntextarea {\n overflow: auto;\n}\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\ncanvas {\n display: inline-block;\n}\n\nfigure {\n margin: 0;\n}\n\nimg {\n border: 0;\n font-style: italic;\n height: auto;\n max-width: 100%;\n vertical-align: middle;\n}\n@media print {\n img {\n max-width: 100% !important;\n page-break-inside: avoid;\n }\n}\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n.web-area-title {\n margin: 0;\n}","/* stylelint-disable */\n\n@use \"sass:map\";\n\n@use \"uswds-core/src/styles/variables/font-type-tokens\" as *;\n@use \"uswds-core/src/styles/mixins/general/font-face\" as *;\n\n@each $font-type-token, $metadata in $project-font-type-tokens {\n @if map.get($metadata, \"typeface-token\") {\n $this-typeface-token: map.get($metadata, \"typeface-token\");\n $this-src: map.get($metadata, \"src\");\n @include render-font-face($this-typeface-token, $this-src);\n }\n}\n\n/* stylelint-enable */\n","@use \"sass:map\";\n@use \"sass:string\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: url(#{$file-path}.woff2) format(\"woff2\"),\n url(#{$file-path}.woff) format(\"woff\"),\n url(#{$file-path}.ttf) format(\"truetype\");\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src sefined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled {\n @include button-disabled;\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n.usa-button--disabled {\n @include button-disabled;\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline-inverse-disabled,\n.usa-button--outline:disabled,\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse:disabled {\n background-color: color(\"transparent\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"transparent\");\n border: 0;\n }\n}\n\n.usa-button--outline-disabled,\n.usa-button--outline:disabled {\n box-shadow: $button-stroke color(\"disabled\");\n color: color(\"disabled\");\n\n &.usa-button--inverse {\n background-color: transparent;\n box-shadow: $button-stroke color(\"base\");\n color: color(\"base\");\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-line-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n $family: list.nth($value, 1);\n $scale: list.nth($value, 2);\n line-height: lh($family, $scale) #{$important};\n}\n","@use \"../../functions/color/get-color-token-from-bg\" as *;\n@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@mixin set-text-from-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n $accessible-color-token: get-color-token-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context\n );\n color: color($accessible-color-token) #{$important};\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../functions/general/get-default\" as *;\n\n@use \"./set-text-from-bg\" as *;\n\n@mixin set-text-and-bg(\n $bg-color: \"default\",\n $preferred-text-color: \"default\",\n $fallback-text-color: \"default\",\n $wcag-target: \"AA\",\n $context: false,\n $important: null\n) {\n $important: if($important, \" !important\", null);\n\n @include set-text-from-bg(\n $bg-color,\n $preferred-text-color,\n $fallback-text-color,\n $wcag-target,\n $context,\n $important: $important\n );\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n background-color: color($bg-color) #{$important};\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n}\n","@mixin add-knockout-font-smoothing {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin no-knockout-font-smoothing {\n -moz-osx-font-smoothing: inherit;\n -webkit-font-smoothing: inherit;\n}\n","@use \"./add-knockout-font-smoothing\" as *;\n@use \"../../functions\" as *;\n\n@mixin button-disabled {\n @include add-knockout-font-smoothing;\n background-color: color(\"disabled\");\n color: color(\"white\");\n\n &:hover,\n &.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:focus,\n &.usa-focus {\n background-color: color(\"disabled\");\n border: 0;\n box-shadow: none;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/usa-prose\" as *;\n@use \"../typography/typeset\" as *;\n@use \"add-knockout-font-smoothing\" as *;\n\n@mixin button-unstyled {\n @include no-knockout-font-smoothing;\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n margin: 0;\n padding: 0;\n text-align: left;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &:disabled.usa-button--hover,\n &.usa-button--disabled:hover,\n &.usa-button--disabled.usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &:disabled.usa-button--active,\n &.usa-button--disabled:active,\n &.usa-button--disabled.usa-button--active,\n &:disabled:focus,\n &:disabled.usa-focus,\n &.usa-button--disabled:focus,\n &.usa-button--disabled.usa-focus,\n &:disabled,\n &.usa-button--disabled {\n @include no-knockout-font-smoothing;\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &:disabled,\n &.usa-button--disabled {\n color: color(\"disabled\");\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","// @file\n// Universal styles.\n\n@use '../../../00-config' as *;\n\n* {\n transition-duration: gesso-duration(short);\n transition-property: background-color, border-color, box-shadow, color,\n opacity, text-shadow, transform;\n transition-timing-function: gesso-easing(ease-in);\n}\n\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important;\n text-shadow: none !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n\n[id] {\n scroll-margin-top: 1em;\n}\n","// @file\n// HTML styles.\n\n@use 'sass:math';\n@use '../../../00-config' as *;\n\nhtml {\n @include add-kerning();\n font-size: 100% * math.div(gesso-base-font-size(), 16px);\n min-height: 100%;\n}\n","@mixin add-kerning {\n font-feature-settings: \"kern\" 1;\n font-kerning: normal;\n}\n","// @file\n// Body styles.\n\n@use '../../../00-config' as *;\n\nbody {\n @include typeset();\n background-color: gesso-color(background, site);\n color: gesso-color(text, primary);\n margin: 0;\n padding: 0;\n word-wrap: break-word;\n\n // stylelint-disable selector-no-qualifying-type\n &.has-open-mobile-menu {\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n }\n // stylelint-enable\n\n // Tweak styling in WYSIWYG editor.\n @if $wysiwyg {\n padding: 0 rem(gesso-site-margins(desktop));\n }\n}\n","// @file\n// Nav element styles.\n\nnav {\n @media print {\n display: none;\n }\n}\n","// @file\n// Details element styles.\n\n// details {}\n\nsummary {\n display: list-item;\n}\n","// @file\n// Iframe element styles.\n\niframe {\n border: 0;\n max-width: 100%;\n\n @media print {\n display: none;\n }\n}\n","// @file\n// Heading styles.\n\n@use '../../../00-config' as *;\n\n%hN {\n @include typeset-heading();\n clear: none;\n hyphens: none;\n text-rendering: optimizeLegibility;\n\n @media print {\n orphans: 3;\n page-break-after: avoid;\n widows: 3;\n\n &::after {\n display: inline-block;\n }\n }\n}\n\nh1,\n%h1 {\n @extend %hN;\n @include display-text-style(h1);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, xl);\n }\n}\n\nh2,\n.h2,\n%h2 {\n @extend %hN;\n @include display-text-style(h2);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, lg);\n }\n}\n\nh3,\n.h3,\n%h3 {\n @extend %hN;\n @include display-text-style(h3);\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n font-size: font-size(heading, md);\n }\n}\n\nh4,\n.h4,\n%h4 {\n @extend %hN;\n @include display-text-style(h4);\n}\n\nh5,\n.h5,\n%h5 {\n @extend %hN;\n @include display-text-style(h5);\n}\n\nh6,\n.h6,\n%h6 {\n @extend %hN;\n @include display-text-style(h6);\n}\n","// @file\n// Overrides for USWDS typography mixins\n\n@use '../../00-functions' as *;\n\n@mixin typeset-heading {\n @include u-margin-y(0);\n clear: none;\n margin-bottom: rem(gesso-spacing(2));\n\n * + & {\n margin-top: 1em;\n }\n}\n\n@mixin typeset-p {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n margin-bottom: rem(gesso-spacing(2));\n margin-top: 0;\n}\n","// @file\n// Display text styles\n\n@use '../00-functions' as *;\n\n@mixin display-text-style($keys...) {\n $display: gesso-get-map(typography, display, $keys...);\n\n @each $property, $value in $display {\n @if ($property == 'font-size') {\n // Check for px if not output value.\n #{$property}: #{rem(convert($value))};\n } @else {\n #{$property}: #{$value};\n }\n }\n}\n","// Mixins: Breakpoint\n// A 16px base value is passed to em() functions within breakpoint mixins due\n// to browsers not using the Gesso base font size for media query calculations.\n\n@use 'sass:string';\n@use '../config.settings' as *;\n@use '../00-functions' as *;\n\n// Create a min-width media query.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint-min($breakpoint) {\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (min-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Assume min-width if shorthand breakpoint mixin is used.\n// @param {Number} $breakpoint - width value.\n@mixin breakpoint($breakpoint) {\n @include breakpoint-min($breakpoint) {\n @content;\n }\n}\n\n// Create a max-width media query.\n// @param {Number} $breakpoint - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint value.\n@mixin breakpoint-max($breakpoint, $subtract_1_from_max: false) {\n @if $subtract_1_from_max {\n $breakpoint: px($breakpoint) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint: em($breakpoint, 16px);\n }\n @media (max-width: #{$breakpoint}) {\n @content;\n }\n}\n\n// Create a media query with both min-width and max-width.\n// @param {Number} $breakpoint-min - width value.\n// @param {Number} $breakpoint-max - width value.\n// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint-max value.\n@mixin breakpoint-min-max(\n $breakpoint-min,\n $breakpoint-max,\n $subtract_1_from_max: false\n) {\n @if $subtract_1_from_max {\n $breakpoint-max: px($breakpoint-max) - 1px;\n }\n @if $breakpoints-ems {\n $breakpoint-min: em($breakpoint-min, 16px);\n $breakpoint-max: em($breakpoint-max, 16px);\n }\n @media (min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max}) {\n @content;\n }\n}\n","// @file\n// Paragraph styles.\n\n@use '../../../00-config' as *;\n\np {\n @include typeset-p();\n\n @media print {\n orphans: 3;\n widows: 3;\n }\n\n // Hide empty paragraphs except in WYSIWYG editor.\n @if not $wysiwyg {\n &:empty {\n margin: 0 !important;\n }\n }\n}\n","// @file\n// Inline element styles.\n\n@use '../../../00-config' as *;\n\na {\n background-color: transparent;\n color: gesso-color(text, link);\n -webkit-text-decoration-skip: objects;\n\n &:visited {\n color: gesso-color(text, link-visited);\n }\n\n &:hover,\n &:focus {\n color: gesso-color(text, link-hover);\n }\n\n &:active {\n color: gesso-color(text, link-active);\n }\n\n @media print {\n &,\n &:visited {\n text-decoration: none;\n }\n\n &[href]::after {\n content: ' <' attr(href) '>';\n font-family: font-family(body);\n font-size: 10pt;\n font-weight: normal;\n text-transform: lowercase;\n }\n\n &[href^='/']::after {\n content: ' ';\n }\n\n &[href^='javascript:']::after,\n &[href^='mailto:']::after,\n &[href^='tel:']::after,\n &[href^='#']::after,\n &[href*='?']::after {\n content: '';\n }\n }\n}\n\nabbr {\n &[title] {\n border-bottom: 1px dotted;\n text-decoration: none;\n\n @include breakpoint(max-width gesso-breakpoint(tablet)) {\n border-bottom: 0;\n\n &::after {\n content: ' (' attr(title) ')';\n }\n }\n }\n\n &:hover {\n cursor: help;\n }\n\n @media print {\n &[title] {\n border-bottom: 0;\n\n &::after {\n content: ' (' attr(title) ')';\n }\n }\n }\n}\n\n// b {}\n\ncite {\n @include display-text-style(cite);\n}\n\n// code {}\n\n// del {}\n\ndfn {\n font-style: normal;\n}\n\n// em {}\n\n// i {}\n\nins {\n text-decoration: none;\n}\n\n// kbd {}\n\nmark {\n background: #ff0;\n color: #000;\n}\n\n// q {}\n\n// s {}\n\n// samp {}\n\nsmall {\n font-size: 80%;\n}\n\n// strong {}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n// time {}\n\n// u {}\n\nvar {\n font-style: normal;\n}\n","// @file\n// Blockquote styles.\n\n@use '../../../00-config' as *;\n\n$blockquote-cite-divider-color: gesso-color(ui, generic, border);\n\n%pull-quote {\n @include display-text-style(blockquote);\n background-color: gesso-grayscale(white);\n border-left: rem(units(1)) solid gesso-brand(aqua, base);\n clear: both;\n margin: 0 0 rem(gesso-spacing(3));\n padding: rem(units($theme-alert-padding-x)) 0\n rem(units($theme-alert-padding-x)) rem(units($theme-alert-padding-x));\n\n > :last-child {\n margin-bottom: 0;\n }\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(3));\n }\n}\n\n%pull-quote__cite {\n display: block;\n margin: rem(gesso-spacing(2)) 0;\n text-align: left;\n}\n\nblockquote {\n @extend %pull-quote;\n\n p {\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n\n cite {\n @extend %pull-quote__cite;\n\n em {\n border-left: 1px solid $blockquote-cite-divider-color;\n font-weight: font-weight(normal);\n margin-left: rem(gesso-spacing('05'));\n padding-left: rem(gesso-spacing(1));\n }\n }\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Preformatted text styles.\n\n@use '../../../00-config' as *;\n\npre {\n margin: 0 0 rem(gesso-spacing(2));\n overflow: auto;\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(2));\n }\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Horizontal rule styles.\n\n@use '../../../00-config' as *;\n\nhr {\n border-top: solid gesso-grayscale(gray-3);\n border-width: 1px 0 0;\n box-sizing: content-box;\n height: 0;\n margin: 0 0 rem(gesso-spacing(3));\n overflow: auto;\n\n // Add top margin when preceded by another element.\n * + & {\n margin-top: rem(gesso-spacing(3));\n }\n}\n","// @file\n// Address element styles.\n\naddress {\n font-style: normal;\n}\n","// @file\n// Unordered list styles.\n\n@use '../../../00-config' as *;\n\nul {\n @extend %usa-list;\n list-style-type: disc;\n margin-top: 0;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n padding-left: 0;\n padding-right: 3ch;\n }\n }\n\n &:last-child {\n margin-bottom: revert;\n }\n\n ol,\n ul {\n margin-top: rem(gesso-spacing(1));\n }\n\n ul {\n list-style-type: circle;\n\n ul {\n list-style-type: square;\n }\n }\n}\n","// @file\n// Ordered list styles.\n\n@use '../../../00-config' as *;\n\nol {\n @extend %usa-list;\n margin-top: 0;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n padding-left: 0;\n padding-right: 3ch;\n }\n }\n\n &:last-child {\n margin-bottom: revert;\n }\n\n ol,\n ul {\n margin-top: rem(gesso-spacing(1));\n }\n\n ol {\n list-style-type: lower-alpha;\n\n ol {\n list-style-type: lower-roman;\n }\n }\n}\n","// @file\n// List item styles.\n\n@use '../../../00-config' as *;\n\nli {\n @extend %usa-list-item;\n max-width: unset;\n\n @media print {\n page-break-inside: avoid;\n }\n}\n","// @file\n// Definition list styles.\n\n@use '../../../00-config' as *;\n\ndd {\n margin: 0 0 rem(gesso-spacing(2)) 3ch;\n\n @if $support-for-rtl {\n [dir='rtl'] & {\n margin-left: 0;\n margin-right: 3ch;\n }\n }\n}\n\ndl {\n margin: 0 0 rem(gesso-spacing(2));\n}\n\n// dt {}\n","// @file\n// Table styles.\n\n@use '../../../00-config' as *;\n\ntable {\n @include usa-table();\n}\n\nthead {\n @media print {\n display: table-header-group;\n }\n}\n\ntbody {\n th {\n background-color: color('base-lightest');\n font-weight: $theme-font-weight-bold;\n }\n}\n\ntr {\n @media print {\n page-break-inside: avoid;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"button-unstyled\" as *;\n@use \"../helpers\" as *;\n@use \"../utilities\" as *;\n@use \"../typography/typeset\" as *;\n\n$table-text-color: get-color-token-from-bg(\n $bg-color: $theme-body-background-color,\n $preferred-text-token: $theme-table-text-color,\n $context: \"Table text\",\n);\n\n$table-header-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-header-background-color,\n $preferred-text-token: $theme-table-header-text-color,\n $context: \"Table header text\",\n )\n);\n\n$table-stripe-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-stripe-background-color,\n $preferred-text-token: $theme-table-stripe-text-color,\n $context: \"Table stripe text\",\n )\n);\n\n$table-sorted-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-background-color,\n $context: \"Table sorted text\",\n )\n);\n\n$table-sorted-header-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-header-background-color,\n $preferred-text-token: $theme-table-header-text-color,\n $context: \"Table sorted header text\",\n )\n);\n\n$table-sorted-stripe-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-stripe-background-color,\n $preferred-text-token: $theme-table-stripe-text-color,\n $context: \"Table sorted stripe text\",\n )\n);\n\n$table-sorted-icon-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-header-background-color,\n $preferred-text-token: $theme-table-sorted-icon-color,\n $context: \"Table sorted icon\",\n )\n);\n\n$table-unsorted-icon-color: get-color-token-from-bg(\n $bg-color: $theme-table-header-background-color,\n $preferred-text-token: $theme-table-unsorted-icon-color,\n $context: \"Table unsorted icon\",\n);\n\n\n// Shared table styles\n@mixin table-header-unsorted-styles {\n padding-right: units(5);\n position: relative;\n &::after {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-bottom-width: units(1px);\n bottom: 0;\n content: \"\";\n height: 0;\n left: 0;\n position: absolute;\n width: 100%;\n }\n}\n\n@mixin table-button-default-styles {\n @include button-unstyled;\n @include u-square(4);\n background-position: center center;\n background-size: units(3);\n color: color($theme-table-unsorted-icon-color);\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n // vertically center button within table header\n top: 50%;\n transform: translate(0, -50%);\n .usa-icon {\n @include u-square(3);\n vertical-align: middle;\n & > g {\n fill: transparent;\n }\n }\n}\n\n// The SVG in the sortable column button contains three icon shapes.\n// This CSS controls which of the shapes is 'filled' when active.\n\n@mixin table-button-unsorted-styles {\n @include table-button-default-styles;\n .usa-icon > g.unsorted {\n fill: color($table-unsorted-icon-color);\n }\n &:hover .usa-icon > g.unsorted {\n fill: color(\n next-token($table-unsorted-icon-color, \"darker\")\n )\n }\n}\n\n@mixin table-button-sorted-ascending-styles {\n @include table-button-default-styles;\n .usa-icon > g.ascending {\n fill: $table-sorted-icon-color;\n }\n}\n\n@mixin table-button-sorted-descending-styles {\n @include table-button-default-styles;\n .usa-icon > g.descending {\n fill: $table-sorted-icon-color;\n }\n}\n\n@mixin table-stacked-styles {\n thead {\n display: none;\n }\n\n th,\n td {\n border-bottom-width: 0;\n display: block;\n width: 100%;\n }\n\n tr {\n border-bottom: units(0.5) solid color($theme-table-border-color);\n border-top-width: 0;\n display: block;\n width: 100%;\n th:first-child,\n td:first-child {\n border-top-width: 0;\n }\n &:nth-child(odd) {\n td,\n th {\n background-color: inherit;\n }\n }\n\n &:first-child {\n th:first-child,\n td:first-child {\n border-top: units(0.5) solid color($theme-table-border-color);\n }\n }\n }\n\n th[data-label],\n td[data-label] {\n padding-bottom: units(1.5);\n\n &:before {\n content: attr(data-label);\n display: block;\n font-weight: fw(\"bold\");\n margin: units(-1) units(-2) units(0);\n padding: units(1.5) units(2) units(0.5);\n }\n }\n}\n\n@mixin table-stacked-header-styles {\n tr {\n td:first-child,\n th:first-child {\n @include typeset(\n $theme-body-font-family,\n $theme-h4-font-size,\n $theme-heading-line-height\n );\n background-color: color($theme-table-header-background-color);\n color: $table-header-text-color;\n font-weight: fw(\"bold\");\n padding: units(1.5) units(2);\n &:before {\n display: none;\n }\n }\n }\n}\n\n@mixin usa-table {\n @include border-box-sizing;\n @include typeset;\n border-collapse: collapse;\n border-spacing: 0;\n color: color($table-text-color);\n margin: units(2.5) 0;\n text-align: left;\n\n thead {\n th {\n background-clip: padding-box;\n color: $table-header-text-color;\n font-weight: fw(\"bold\");\n line-height: line-height(\n $theme-body-font-family,\n $theme-input-line-height\n );\n }\n\n th,\n td {\n background-color: color($theme-table-header-background-color);\n color: $table-header-text-color;\n }\n }\n tbody {\n th {\n text-align: left;\n }\n }\n th,\n td {\n background-color: color($theme-body-background-color);\n border: 1px solid color($theme-table-border-color);\n font-weight: fw(\"normal\");\n padding: units(1) units(2);\n }\n\n caption {\n @include u-font(\"body\", \"xs\");\n font-weight: fw(\"bold\");\n margin-bottom: units(1.5);\n text-align: left;\n }\n\n /* stylelint-disable selector-class-pattern */\n th[data-sortable] {\n @include table-header-unsorted-styles;\n\n &:not([aria-sort]),\n &[aria-sort=\"none\"] {\n .usa-table__header__button {\n @include table-button-unsorted-styles;\n }\n }\n\n &[aria-sort=\"descending\"],\n &[aria-sort=\"ascending\"] {\n background-color: color($theme-table-sorted-header-background-color);\n }\n\n &[aria-sort=\"descending\"] {\n .usa-table__header__button {\n @include table-button-sorted-descending-styles;\n }\n }\n\n &[aria-sort=\"ascending\"] {\n .usa-table__header__button {\n @include table-button-sorted-ascending-styles;\n }\n }\n }\n /* stylelint-enable selector-class-pattern */\n\n thead {\n th[aria-sort] {\n background-color: color($theme-table-sorted-header-background-color);\n color: $table-sorted-header-text-color;\n }\n }\n\n td[data-sort-active],\n th[data-sort-active] {\n background-color: color($theme-table-sorted-background-color);\n color: $table-sorted-text-color;\n }\n}\n\n\n@mixin usa-table--borderless {\n thead {\n th {\n background-color: transparent;\n border-top: 0;\n color: color($table-text-color);\n\n &[aria-sort] {\n color: $table-sorted-header-text-color;\n }\n }\n /* stylelint-disable selector-class-pattern */\n th[data-sortable]:not([aria-sort]) {\n .usa-table__header__button .usa-icon > g.unsorted {\n fill: color($table-text-color);\n }\n\n .usa-table__header__button:hover .usa-icon > g.unsorted {\n fill: color(\n next-token($table-text-color, \"darker\")\n );\n }\n }\n /* stylelint-enable selector-class-pattern */\n }\n\n th,\n td {\n border-left: 0;\n border-right: 0;\n }\n}\n\n@mixin usa-table--compact {\n th,\n td {\n padding: units(0.5) units(1.5);\n }\n}\n\n@mixin usa-table--striped {\n tbody {\n tr:nth-child(odd) {\n td,\n th {\n background-color: color($theme-table-stripe-background-color);\n color: $table-stripe-text-color;\n &[data-sort-active] {\n background-color: color($theme-table-sorted-stripe-background-color);\n color: $table-sorted-stripe-text-color;\n }\n }\n }\n }\n}\n\n@mixin usa-table--stacked {\n @include table-stacked-styles;\n}\n\n@mixin usa-table--stacked-header {\n @include table-stacked-styles;\n @include table-stacked-header-styles;\n}\n\n@mixin usa-table-container--scrollable {\n margin: units(2.5) 0;\n overflow-y: hidden;\n\n .usa-table {\n margin: 0;\n }\n\n td {\n white-space: nowrap;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs height\n\n@mixin u-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n height: get-uswds-value(\"height\", $value...) #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs width\n\n@mixin u-width($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n width: get-uswds-value(\"width\", $value...) #{$important};\n}\n","// @file\n// Form element styles.\n\n@use '../../../00-config' as *;\n\n// Don’t style button elements, since they’re often styled as links for\n// accessible widgets. Use the .button class in components/button.\nbutton {\n overflow: visible;\n}\n\n// datalist {}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n// form {}\n\n// Don't style button, submit, or reset elements, since they're often styled as\n// links for accessible widgets. Use the .button class in\n// partials/components/button.\ninput {\n line-height: normal;\n}\n\n// input[type='button'] {}\n// input[type='checkbox'] {}\n// input[type='color'] {}\n// input[type='date'] {}\n// input[type='datetime'] {}\n// input[type='datetime-local'] {}\n// input[type='email'] {}\n// input[type='file'] {}\n// input[type='image'] {}\n// input[type='month'] {}\n// input[type='number'] {}\n// input[type='password'] {}\n// input[type='radio'] {}\n// input[type='range'] {}\n// input[type='reset'] {}\n// input[type='search'] {}\n// input[type='submit'] {}\n// input[type='tel'] {}\n// input[type='text'] {}\n// input[type='time'] {}\n// input[type='url'] {}\n// input[type='week'] {}\n\n// label {}\n\nlegend {\n border: 0;\n box-sizing: border-box;\n color: inherit;\n display: table;\n margin: 0;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\n// meter {}\n\noptgroup {\n font-weight: font-weight(bold);\n}\n\n// option {}\n\n// output {}\n\n// progress {}\n\n// select {}\n\ntextarea {\n overflow: auto;\n}\n","// @file\n// Audio element styles.\n\naudio {\n &:not([controls]) {\n display: none;\n height: 0;\n }\n}\n","// @file\n// Canvas element styles.\n\ncanvas {\n display: inline-block;\n}\n","// @file\n// Figure element styles.\n\nfigure {\n margin: 0;\n}\n\n// figcaption {}\n","// @file\n// IMG element styles.\n\nimg {\n border: 0;\n font-style: italic; // Makes alt text stand out from surrounding text.\n height: auto;\n max-width: 100%;\n vertical-align: middle;\n\n @media print {\n max-width: 100% !important;\n page-break-inside: avoid;\n }\n}\n","// @file\n// SVG element styles.\n\nsvg {\n &:not(:root) {\n overflow: hidden;\n }\n}\n","// @file\n// Styles for a Web Area Title.\n\n@use '../../00-config' as *;\n@use '../../02-base' as *;\n\n.web-area-title {\n @extend %h3;\n margin: 0;\n}\n"]} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml b/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml index a6785f9c1e..f4b614a7eb 100644 --- a/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml +++ b/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml @@ -60,6 +60,9 @@ image_gallery: dependencies: - epa_theme/common - core/drupal + css: + theme: + css/image-gallery/image-gallery.css: {} hero_slideshow: version: VERSION js: @@ -67,6 +70,9 @@ hero_slideshow: dependencies: - epa_theme/common - core/drupal + css: + theme: + css/hero-slideshow/hero-slideshow.css: {} media_link: version: VERSION js: @@ -117,7 +123,7 @@ facet: css: theme: css/facet/facet.css: {} -facet-list: +facet_list: version: VERSION css: theme: @@ -127,8 +133,53 @@ filters: css: theme: css/filters/filters.css: {} -header-link: +header_link: + version: VERSION + css: + theme: + css/header-link/header-link.css: {} +hublinks: + version: VERSION + css: + theme: + css/hublinks/hublinks.css: {} +pager: + version: VERSION + css: + theme: + css/pager/pager.css: {} +progress: + version: VERSION + css: + theme: + css/progress/progress.css: {} +rss_feed: + version: VERSION + css: + theme: + css/rss-feed/rss-feed.css: {} +site_alert: + version: VERSION + css: + theme: + css/site-alert/site-alert.css: {} +web_area_title: + version: VERSION + css: + theme: + css/web-area-title/web-area-title.css: {} +definition: + version: VERSION + css: + theme: + css/definition/definition.css: {} +filters: + version: VERSION + css: + theme: + css/filters/filters.css: {} +teaser: version: VERSION css: theme: - css/header-link/header-link.css: {} \ No newline at end of file + css/teaser/teaser.css: {} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/_definition.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/definition.scss similarity index 100% rename from services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/_definition.scss rename to services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/definition.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/definition.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/definition.twig index 8859fc3325..505aa7069a 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/definition.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/definition.twig @@ -1,3 +1,5 @@ +{{ attach_library('epa_theme/definition') }} +
+ {% include '@components/facet-list/facet-list.twig' with { + 'attributes': attributes, + 'list': items, + } %} {% endif %} {% if empty %} @@ -43,6 +41,7 @@ {% if content|striptags|trim %} {% if facet %} {% include '@uswds/_accordion/_accordion-content.twig' with { + 'attributes': '', 'accordion_id': 'facets', 'content_id': facet_id|clean_class, 'title': facet_name, diff --git a/services/drupal/web/themes/epa_theme/templates/facets/facets-result-item.html.twig b/services/drupal/web/themes/epa_theme/templates/facets/facets-result-item.html.twig index 8b6e4db2bc..15eee43dea 100644 --- a/services/drupal/web/themes/epa_theme/templates/facets/facets-result-item.html.twig +++ b/services/drupal/web/themes/epa_theme/templates/facets/facets-result-item.html.twig @@ -16,6 +16,7 @@ * @ingroup themeable */ #} +{{ attach_library('epa_theme/facet') }} {%- include '@components/icon/icon.twig' with { 'modifier_classes': 'facet__icon facet__icon--empty', From 3ac9d88e76bad271b40404d1633f0081910b6bcf Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 3 Nov 2022 11:18:33 -0400 Subject: [PATCH 37/59] EPAD8-1809: Fix entity moderation form typo --- .../epa_theme/templates/form/entity-moderation-form.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/drupal/web/themes/epa_theme/templates/form/entity-moderation-form.html.twig b/services/drupal/web/themes/epa_theme/templates/form/entity-moderation-form.html.twig index 28a83afbe6..f9c8553e19 100644 --- a/services/drupal/web/themes/epa_theme/templates/form/entity-moderation-form.html.twig +++ b/services/drupal/web/themes/epa_theme/templates/form/entity-moderation-form.html.twig @@ -53,7 +53,7 @@ {{ form.submit }} {% endset %} -{% include '@components/box/box-special/box-special.twig' with { +{% include '@components/box/box--special/box--special.twig' with { 'label': '', 'image': '', 'content': box_content, From 5d4cdd67bad14e2ebb5dddc89c59cbb6ee1c76d8 Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Sat, 5 Nov 2022 19:18:50 -0600 Subject: [PATCH 38/59] add editoria11y --- services/drupal/composer.json | 1 + 1 file changed, 1 insertion(+) diff --git a/services/drupal/composer.json b/services/drupal/composer.json index 2a943c5688..8eee88e9cb 100644 --- a/services/drupal/composer.json +++ b/services/drupal/composer.json @@ -241,6 +241,7 @@ "drupal/diff": "^1.0", "drupal/duration_field": "^2.0", "drupal/editor_advanced_link": "^1.8", + "drupal/editoria11y": "^2.0", "drupal/elasticsearch_connector": "^7.0-alpha3", "drupal/embed": "^1.4", "drupal/entity_browser": "^2.6", From 42c1def19e3715ba51eacc059280cdd22acfaafb Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Tue, 8 Nov 2022 14:21:56 -0500 Subject: [PATCH 39/59] EPAD8-1809: Ensure before/after styles are used in Drupal --- services/drupal/web/themes/epa_theme/source/core.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/services/drupal/web/themes/epa_theme/source/core.scss b/services/drupal/web/themes/epa_theme/source/core.scss index 7c61e9eb4d..bdef2ba96f 100644 --- a/services/drupal/web/themes/epa_theme/source/core.scss +++ b/services/drupal/web/themes/epa_theme/source/core.scss @@ -66,6 +66,7 @@ @forward '_patterns/05-components/_view/views-view-unformatted/views-view-unformatted'; @forward '_patterns/05-components/article/article'; @forward '_patterns/05-components/back-to-top/back-to-top'; +@forward '_patterns/05-components/before-after-swipe/before-after-swipe'; @forward '_patterns/05-components/button/button'; @forward '_patterns/05-components/button/button--danger/button--danger'; @forward '_patterns/05-components/button-group'; From e8c131cafdcc2c5889c5e5ec320364aff56f7528 Mon Sep 17 00:00:00 2001 From: Aimee Rydarowski Date: Fri, 11 Nov 2022 10:43:58 -0500 Subject: [PATCH 40/59] using focal point widget for form display of banner image media type --- .../core.entity_form_display.media.banner_image.default.yml | 6 ++++-- ...entity_form_display.media.banner_image.media_library.yml | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml b/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml index cc4c4ce09a..e31f66519a 100644 --- a/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml +++ b/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml @@ -7,8 +7,8 @@ dependencies: - image.style.thumbnail - media.type.banner_image module: + - focal_point - path - - svg_image id: media.banner_image.default targetEntityType: media bundle: banner_image @@ -21,12 +21,14 @@ content: settings: { } third_party_settings: { } field_media_image: - type: image_image + type: image_focal_point weight: 0 region: content settings: progress_indicator: throbber preview_image_style: thumbnail + preview_link: true + offsets: '50,50' third_party_settings: { } langcode: type: language_select diff --git a/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml b/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml index 169c3ccf53..1fb3c3e1c5 100644 --- a/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml +++ b/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml @@ -8,19 +8,21 @@ dependencies: - image.style.thumbnail - media.type.banner_image module: - - svg_image + - focal_point id: media.banner_image.media_library targetEntityType: media bundle: banner_image mode: media_library content: field_media_image: - type: image_image + type: image_focal_point weight: -50 region: content settings: progress_indicator: throbber preview_image_style: thumbnail + preview_link: true + offsets: '50,50' third_party_settings: { } hidden: created: true From 46e4dbd06b72e28573e6cc91077fb15549c3815f Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Fri, 18 Nov 2022 00:15:41 -0700 Subject: [PATCH 41/59] gulp rename, update theme yml with new file location --- .../themes/epa_theme/epa_theme.libraries.yml | 44 +++++++++---------- .../drupal/web/themes/epa_theme/gulpfile.js | 8 ++++ 2 files changed, 30 insertions(+), 22 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml b/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml index 829b2f3631..36cdba0110 100644 --- a/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml +++ b/services/drupal/web/themes/epa_theme/epa_theme.libraries.yml @@ -62,7 +62,7 @@ image_gallery: - core/drupal css: theme: - css/image-gallery/image-gallery.css: {} + css/image-gallery.css: {} hero_slideshow: version: VERSION js: @@ -72,7 +72,7 @@ hero_slideshow: - core/drupal css: theme: - css/hero-slideshow/hero-slideshow.css: {} + css/hero-slideshow.css: {} media_link: version: VERSION js: @@ -102,99 +102,99 @@ audio: version: VERSION css: theme: - css/audio/audio.css: {} + css/audio.css: {} block: version: VERSION css: theme: - css/block/block.css: {} + css/block.css: {} boxes: version: VERSION css: theme: - css/box/index.css: {} + css/box.css: {} definition: version: VERSION css: theme: - css/definition/definition.css: {} + css/definition.css: {} document: version: VERSION css: theme: - css/document/document.css: {} + css/document.css: {} dropbutton: version: VERSION css: theme: - css/dropbutton/dropbutton.css: {} + css/dropbutton.css: {} facet: version: VERSION css: theme: - css/facet/facet.css: {} + css/facet.css: {} facet_list: version: VERSION css: theme: - css/facet-list/facet-list.css: {} + css/facet-list.css: {} field: version: VERSION css: theme: - css/field/index.css: {} + css/field.css: {} filters: version: VERSION css: theme: - css/filters/filters.css: {} + css/filters.css: {} header_link: version: VERSION css: theme: - css/header-link/header-link.css: {} + css/header-link.css: {} hero: version: VERSION css: theme: - css/hero/index.css: {} + css/hero.css: {} hublinks: version: VERSION css: theme: - css/hublinks/hublinks.css: {} + css/hublinks.css: {} pager: version: VERSION css: theme: - css/pager/pager.css: {} + css/pager.css: {} progress: version: VERSION css: theme: - css/progress/progress.css: {} + css/progress.css: {} rss_feed: version: VERSION css: theme: - css/rss-feed/rss-feed.css: {} + css/rss-feed.css: {} site_alert: version: VERSION css: theme: - css/site-alert/site-alert.css: {} + css/site-alert.css: {} teaser: version: VERSION css: theme: - css/teaser/teaser.css: {} + css/teaser.css: {} web_area_title: version: VERSION css: theme: - css/web-area-title/web-area-title.css: {} + css/web-area-title.css: {} web_area_footer: version: VERSION css: theme: - css/web-area-footer/web-area-footer.css: {} \ No newline at end of file + css/web-area-footer.css: {} \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/gulpfile.js b/services/drupal/web/themes/epa_theme/gulpfile.js index 3b597716a2..9da63e23f4 100644 --- a/services/drupal/web/themes/epa_theme/gulpfile.js +++ b/services/drupal/web/themes/epa_theme/gulpfile.js @@ -106,6 +106,14 @@ const buildSass = mode => { }), ]) ) + .pipe(rename(function (path) { + if(path.basename === 'index') { + path.basename = path.dirname; + } + if(path.dirname != '.') { + path.dirname = '.'; + } + })) .pipe(sourcemaps.write('.')) .pipe(dest('css')); }; From 29c3126e74eb19daa02ca56a3babf4fb37c677be Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Mon, 21 Nov 2022 00:47:11 -0700 Subject: [PATCH 42/59] SUCCESS --- services/drupal/composer.lock | 68 ++++++++++++++++++++++++++++++++++- 1 file changed, 67 insertions(+), 1 deletion(-) diff --git a/services/drupal/composer.lock b/services/drupal/composer.lock index febe7f0d50..dc37159b95 100644 --- a/services/drupal/composer.lock +++ b/services/drupal/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "c9da32814c91e327f3f3e3cc362bf474", + "content-hash": "c7b23a265869829d30d165e1e2de12bc", "packages": [ { "name": "algolia/places", @@ -4565,6 +4565,72 @@ "source": "https://git.drupalcode.org/project/editor_advanced_link" } }, + { + "name": "drupal/editoria11y", + "version": "2.0.3", + "source": { + "type": "git", + "url": "https://git.drupalcode.org/project/editoria11y.git", + "reference": "2.0.3" + }, + "dist": { + "type": "zip", + "url": "https://ftp.drupal.org/files/projects/editoria11y-2.0.3.zip", + "reference": "2.0.3", + "shasum": "80eb351fa9a9edeb4aad0993844ec732b223bf13" + }, + "require": { + "drupal/core": "^9 || ^10" + }, + "type": "drupal-module", + "extra": { + "drupal": { + "version": "2.0.3", + "datestamp": "1668094235", + "security-coverage": { + "status": "covered", + "message": "Covered by Drupal's security advisory policy" + } + }, + "drush": { + "services": { + "drush.services.yml": "^9 || ^10" + } + } + }, + "notification-url": "https://packages.drupal.org/8/downloads", + "license": [ + "GPL-2.0-or-later" + ], + "authors": [ + { + "name": "John Jameson", + "homepage": "https://www.drupal.org/u/itmaybejj", + "role": "Maintainer" + }, + { + "name": "Brian Osborne", + "homepage": "https://www.drupal.org/u/bkosborne", + "role": "Maintainer" + }, + { + "name": "Jason Partyka", + "homepage": "https://www.drupal.org/u/partyka", + "role": "Maintainer" + }, + { + "name": "See other contributors", + "homepage": "https://www.drupal.org/node/3187132/committers", + "role": "contributor" + } + ], + "description": "Editoria11y (\"editorial accessibility\") is a user-friendly accessibility checker.", + "homepage": "http://drupal.org/project/editoria11y", + "support": { + "source": "https://git.drupalcode.org/project/editoria11y", + "issues": "http://drupal.org/project/issues/editoria11y" + } + }, { "name": "drupal/elasticsearch_connector", "version": "7.0.0-alpha3", From cc3d1bb0248ac77fc0a6170c0676f2d8285bdb75 Mon Sep 17 00:00:00 2001 From: Aimee Rydarowski Date: Mon, 21 Nov 2022 15:22:14 -0500 Subject: [PATCH 43/59] config updates for EPAD8-1846 --- ...orm_display.media.banner_image.default.yml | 7 + ...splay.media.banner_image.media_library.yml | 9 +- ...iew_display.media.banner_image.default.yml | 11 + ....media.banner_image.link_with_metadata.yml | 2 + ...splay.media.banner_image.media_library.yml | 4 + ...er_image.field_banner_image_restricted.yml | 26 +++ ...ge.media.field_banner_image_restricted.yml | 24 ++ .../config/sync/search_api.index.media.yml | 10 + .../drupal/config/sync/views.settings.yml | 2 +- .../views.view.group_media_search_api.yml | 209 +++++++++++++++++- .../config/sync/views.view.media_library.yml | 125 ++++++++++- .../sync/views.view.media_search_api.yml | 80 +++++++ 12 files changed, 505 insertions(+), 4 deletions(-) create mode 100644 services/drupal/config/sync/field.field.media.banner_image.field_banner_image_restricted.yml create mode 100644 services/drupal/config/sync/field.storage.media.field_banner_image_restricted.yml diff --git a/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml b/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml index e31f66519a..5915403c6a 100644 --- a/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml +++ b/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml @@ -3,6 +3,7 @@ langcode: en status: true dependencies: config: + - field.field.media.banner_image.field_banner_image_restricted - field.field.media.banner_image.field_media_image - image.style.thumbnail - media.type.banner_image @@ -20,6 +21,12 @@ content: region: content settings: { } third_party_settings: { } + field_banner_image_restricted: + type: options_select + weight: 101 + region: content + settings: { } + third_party_settings: { } field_media_image: type: image_focal_point weight: 0 diff --git a/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml b/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml index 1fb3c3e1c5..ebd2b2b561 100644 --- a/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml +++ b/services/drupal/config/sync/core.entity_form_display.media.banner_image.media_library.yml @@ -4,6 +4,7 @@ status: true dependencies: config: - core.entity_form_mode.media.media_library + - field.field.media.banner_image.field_banner_image_restricted - field.field.media.banner_image.field_media_image - image.style.thumbnail - media.type.banner_image @@ -14,9 +15,15 @@ targetEntityType: media bundle: banner_image mode: media_library content: + field_banner_image_restricted: + type: options_select + weight: 1 + region: content + settings: { } + third_party_settings: { } field_media_image: type: image_focal_point - weight: -50 + weight: 0 region: content settings: progress_indicator: throbber diff --git a/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml b/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml index 54bc7380c1..5265e271ed 100644 --- a/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml +++ b/services/drupal/config/sync/core.entity_view_display.media.banner_image.default.yml @@ -3,11 +3,13 @@ langcode: en status: true dependencies: config: + - field.field.media.banner_image.field_banner_image_restricted - field.field.media.banner_image.field_media_image - image.style.thumbnail - media.type.banner_image module: - media_inline_embed + - options - svg_image third_party_settings: media_inline_embed: @@ -17,6 +19,13 @@ targetEntityType: media bundle: banner_image mode: default content: + field_banner_image_restricted: + type: list_default + label: above + settings: { } + third_party_settings: { } + weight: 1 + region: content field_media_image: type: image label: visually_hidden @@ -27,6 +36,8 @@ content: width: null height: null svg_render_as_image: true + image_loading: + attribute: lazy third_party_settings: { } weight: 0 region: content diff --git a/services/drupal/config/sync/core.entity_view_display.media.banner_image.link_with_metadata.yml b/services/drupal/config/sync/core.entity_view_display.media.banner_image.link_with_metadata.yml index aae57b7337..3ad914e7ce 100644 --- a/services/drupal/config/sync/core.entity_view_display.media.banner_image.link_with_metadata.yml +++ b/services/drupal/config/sync/core.entity_view_display.media.banner_image.link_with_metadata.yml @@ -4,6 +4,7 @@ status: true dependencies: config: - core.entity_view_mode.media.link_with_metadata + - field.field.media.banner_image.field_banner_image_restricted - field.field.media.banner_image.field_media_image - media.type.banner_image module: @@ -32,6 +33,7 @@ content: hidden: created: true entitygroupfield: true + field_banner_image_restricted: true langcode: true name: true search_api_excerpt: true diff --git a/services/drupal/config/sync/core.entity_view_display.media.banner_image.media_library.yml b/services/drupal/config/sync/core.entity_view_display.media.banner_image.media_library.yml index 4bc87fb753..26ea6be2e7 100644 --- a/services/drupal/config/sync/core.entity_view_display.media.banner_image.media_library.yml +++ b/services/drupal/config/sync/core.entity_view_display.media.banner_image.media_library.yml @@ -4,6 +4,7 @@ status: true dependencies: config: - core.entity_view_mode.media.media_library + - field.field.media.banner_image.field_banner_image_restricted - field.field.media.banner_image.field_media_image - image.style.medium - media.type.banner_image @@ -24,12 +25,15 @@ content: width: null height: null svg_render_as_image: true + image_loading: + attribute: lazy third_party_settings: { } weight: 0 region: content hidden: created: true entitygroupfield: true + field_banner_image_restricted: true field_media_image: true langcode: true name: true diff --git a/services/drupal/config/sync/field.field.media.banner_image.field_banner_image_restricted.yml b/services/drupal/config/sync/field.field.media.banner_image.field_banner_image_restricted.yml new file mode 100644 index 0000000000..e5151b4572 --- /dev/null +++ b/services/drupal/config/sync/field.field.media.banner_image.field_banner_image_restricted.yml @@ -0,0 +1,26 @@ +uuid: a153e0b0-ed90-4a92-9e03-f0cc35412a42 +langcode: en +status: true +dependencies: + config: + - field.storage.media.field_banner_image_restricted + - media.type.banner_image + module: + - custom_add_another + - options +third_party_settings: + custom_add_another: + custom_add_another: '' + custom_remove: '' +id: media.banner_image.field_banner_image_restricted +field_name: field_banner_image_restricted +entity_type: media +bundle: banner_image +label: 'Usage restrictions' +description: 'If you are using images licensed from a stock photo library the license for the image often prohibits reuse of the image. Use this setting to indicate this image is subject to restrictions.' +required: false +translatable: false +default_value: { } +default_value_callback: '' +settings: { } +field_type: list_string diff --git a/services/drupal/config/sync/field.storage.media.field_banner_image_restricted.yml b/services/drupal/config/sync/field.storage.media.field_banner_image_restricted.yml new file mode 100644 index 0000000000..29b1c8fbb5 --- /dev/null +++ b/services/drupal/config/sync/field.storage.media.field_banner_image_restricted.yml @@ -0,0 +1,24 @@ +uuid: 0e2dc2ee-606f-4dbd-9d35-56bff70e5714 +langcode: en +status: true +dependencies: + module: + - media + - options +id: media.field_banner_image_restricted +field_name: field_banner_image_restricted +entity_type: media +type: list_string +settings: + allowed_values: + - + value: restricted + label: Restricted + allowed_values_function: '' +module: options +locked: false +cardinality: 1 +translatable: true +indexes: { } +persist_with_no_fields: false +custom_storage: false diff --git a/services/drupal/config/sync/search_api.index.media.yml b/services/drupal/config/sync/search_api.index.media.yml index bf9d0f8acd..bf7548028d 100644 --- a/services/drupal/config/sync/search_api.index.media.yml +++ b/services/drupal/config/sync/search_api.index.media.yml @@ -10,6 +10,7 @@ dependencies: - field.storage.media.field_media_image - field.storage.media.field_publication_number - field.storage.media.field_media_tags + - field.storage.media.field_banner_image_restricted - search_api.server.localhost module: - file @@ -67,6 +68,14 @@ field_settings: dependencies: module: - media + field_banner_image_restricted: + label: 'Usage restrictions' + datasource_id: 'entity:media' + property_path: field_banner_image_restricted + type: string + dependencies: + config: + - field.storage.media.field_banner_image_restricted field_description: label: Description datasource_id: 'entity:media' @@ -178,6 +187,7 @@ datasource_settings: processor_settings: add_url: { } aggregated_field: { } + entity_type: { } ignorecase: weights: preprocess_index: -20 diff --git a/services/drupal/config/sync/views.settings.yml b/services/drupal/config/sync/views.settings.yml index a6f2156207..4ab1a1b9da 100644 --- a/services/drupal/config/sync/views.settings.yml +++ b/services/drupal/config/sync/views.settings.yml @@ -2,7 +2,7 @@ _core: default_config_hash: RaRd9EIcwA4u3qCSRLL8EnCicbda1kV__ASmVbyehvQ display_extenders: views_ajax_get: views_ajax_get -skip_cache: false +skip_cache: true sql_signature: false ui: show: diff --git a/services/drupal/config/sync/views.view.group_media_search_api.yml b/services/drupal/config/sync/views.view.group_media_search_api.yml index 2dc0ad8dfb..c0ad69fbb9 100644 --- a/services/drupal/config/sync/views.view.group_media_search_api.yml +++ b/services/drupal/config/sync/views.view.group_media_search_api.yml @@ -3,16 +3,18 @@ langcode: en status: true dependencies: config: + - field.storage.media.field_banner_image_restricted - image.style.thumbnail - search_api.index.media - taxonomy.vocabulary.media_tags module: - csv_serialization - group - - image + - options - rest - search_api - serialization + - svg_image - views_autocomplete_filters - views_data_export id: group_media_search_api @@ -153,6 +155,7 @@ display: view_modes: 'entity:media': audio: link_with_metadata + banner_image: link_with_metadata document: link_with_metadata image: link_with_metadata other: link_with_metadata @@ -210,6 +213,75 @@ display: use_highlighting: false multi_type: separator multi_separator: ', ' + field_banner_image_restricted: + id: field_banner_image_restricted + table: search_api_index_media + field: field_banner_image_restricted + relationship: none + group_type: group + admin_label: '' + plugin_id: search_api_field + label: '' + exclude: false + alter: + alter_text: false + text: '' + make_link: false + path: '' + absolute: false + external: false + replace_spaces: false + path_case: none + trim_whitespace: false + alt: '' + rel: '' + link_class: '' + prefix: '' + suffix: '' + target: '' + nl2br: false + max_length: 0 + word_boundary: true + ellipsis: true + more_link: false + more_link_text: '' + more_link_path: '' + strip_tags: false + trim: false + preserve_tags: '' + html: false + element_type: '' + element_class: '' + element_label_type: '' + element_label_class: '' + element_label_colon: false + element_wrapper_type: '' + element_wrapper_class: '' + element_default_classes: true + empty: '' + hide_empty: false + empty_zero: false + hide_alter_empty: true + click_sort_column: value + type: list_default + settings: { } + group_column: value + group_columns: { } + group_rows: true + delta_limit: 0 + delta_offset: 0 + delta_reversed: false + delta_first_last: false + multi_type: separator + separator: ', ' + field_api_classes: false + field_rendering: true + fallback_handler: search_api + fallback_options: + link_to_item: false + use_highlighting: false + multi_type: separator + multi_separator: ', ' bundle: id: bundle table: search_api_index_media @@ -865,6 +937,55 @@ display: default_group_multiple: { } group_items: { } reduce_duplicates: false + field_banner_image_restricted: + id: field_banner_image_restricted + table: search_api_index_media + field: field_banner_image_restricted + relationship: none + group_type: group + admin_label: '' + plugin_id: search_api_options + operator: or + value: { } + group: 1 + exposed: true + expose: + operator_id: field_banner_image_restricted_op + label: 'Usage restrictions' + description: '' + use_operator: false + operator: field_banner_image_restricted_op + operator_limit_selection: false + operator_list: { } + identifier: field_banner_image_restricted + required: false + remember: false + multiple: false + remember_roles: + authenticated: authenticated + anonymous: '0' + paragraphs_library_contributor: '0' + layout_editor: '0' + alerts_manager: '0' + block_manager: '0' + system_editor: '0' + system_webmaster: '0' + menu_admin: '0' + administrator: '0' + reduce: false + is_grouped: false + group_info: + label: '' + description: '' + identifier: '' + optional: true + widget: select + multiple: false + remember: false + default_group: All + default_group_multiple: { } + group_items: { } + reduce_duplicates: false style: type: table options: @@ -872,9 +993,11 @@ display: row_class: '' default_row_class: true columns: + thumbnail: thumbnail name: name search_api_rendered_item: name aggregated_filenames: aggregated_filenames + field_banner_image_restricted: name bundle: bundle uid_1: uid_1 changed: changed @@ -882,6 +1005,11 @@ display: search_api_operations: search_api_operations default: created info: + thumbnail: + align: '' + separator: '' + empty_column: false + responsive: '' name: sortable: true default_sort_order: asc @@ -901,6 +1029,13 @@ display: separator: '' empty_column: false responsive: '' + field_banner_image_restricted: + sortable: false + default_sort_order: asc + align: '' + separator: '' + empty_column: false + responsive: '' bundle: sortable: true default_sort_order: asc @@ -965,6 +1100,7 @@ display: - user - user.group_permissions tags: + - 'config:field.storage.media.field_banner_image_restricted' - 'config:search_api.index.media' data_export_1: id: data_export_1 @@ -1741,6 +1877,7 @@ display: view_modes: 'entity:media': audio: link_with_metadata + banner_image: link_with_metadata document: link_with_metadata image: link_with_metadata other: link_with_metadata @@ -1798,6 +1935,75 @@ display: use_highlighting: false multi_type: separator multi_separator: ', ' + field_banner_image_restricted: + id: field_banner_image_restricted + table: search_api_index_media + field: field_banner_image_restricted + relationship: none + group_type: group + admin_label: '' + plugin_id: search_api_field + label: '' + exclude: false + alter: + alter_text: false + text: '' + make_link: false + path: '' + absolute: false + external: false + replace_spaces: false + path_case: none + trim_whitespace: false + alt: '' + rel: '' + link_class: '' + prefix: '' + suffix: '' + target: '' + nl2br: false + max_length: 0 + word_boundary: true + ellipsis: true + more_link: false + more_link_text: '' + more_link_path: '' + strip_tags: false + trim: false + preserve_tags: '' + html: false + element_type: '' + element_class: '' + element_label_type: '' + element_label_class: '' + element_label_colon: false + element_wrapper_type: '' + element_wrapper_class: '' + element_default_classes: true + empty: '' + hide_empty: false + empty_zero: false + hide_alter_empty: true + click_sort_column: value + type: list_default + settings: { } + group_column: value + group_columns: { } + group_rows: true + delta_limit: 0 + delta_offset: 0 + delta_reversed: false + delta_first_last: false + multi_type: separator + separator: ', ' + field_api_classes: false + field_rendering: true + fallback_handler: search_api + fallback_options: + link_to_item: false + use_highlighting: false + multi_type: separator + multi_separator: ', ' bundle: id: bundle table: search_api_index_media @@ -2170,4 +2376,5 @@ display: - user - user.group_permissions tags: + - 'config:field.storage.media.field_banner_image_restricted' - 'config:search_api.index.media' diff --git a/services/drupal/config/sync/views.view.media_library.yml b/services/drupal/config/sync/views.view.media_library.yml index e19a0e2fa8..ad9573d8b4 100644 --- a/services/drupal/config/sync/views.view.media_library.yml +++ b/services/drupal/config/sync/views.view.media_library.yml @@ -3,12 +3,14 @@ langcode: en status: true dependencies: config: + - field.storage.media.field_banner_image_restricted - image.style.media_library - search_api.index.media - taxonomy.vocabulary.media_tags module: - epa_media - epa_web_areas + - options - search_api - svg_image - user @@ -40,7 +42,7 @@ display: exclude: false alter: alter_text: false - text: '' + text: '{{ search_api_rendered_item }}
{{ field_banner_image_restricted_1 }} ' make_link: false path: '' absolute: false @@ -85,6 +87,76 @@ display: image: media_library other: media_library remote_video: media_library + field_banner_image_restricted: + id: field_banner_image_restricted + table: search_api_datasource_media_entity_media + field: field_banner_image_restricted + relationship: none + group_type: group + admin_label: '' + entity_type: media + plugin_id: search_api_field + label: '' + exclude: false + alter: + alter_text: false + text: '' + make_link: false + path: '' + absolute: false + external: false + replace_spaces: false + path_case: none + trim_whitespace: false + alt: '' + rel: '' + link_class: '' + prefix: '' + suffix: '' + target: '' + nl2br: false + max_length: 0 + word_boundary: true + ellipsis: true + more_link: false + more_link_text: '' + more_link_path: '' + strip_tags: false + trim: false + preserve_tags: '' + html: false + element_type: '' + element_class: '' + element_label_type: '' + element_label_class: '' + element_label_colon: false + element_wrapper_type: '' + element_wrapper_class: '' + element_default_classes: true + empty: '' + hide_empty: false + empty_zero: false + hide_alter_empty: true + click_sort_column: value + type: list_default + settings: { } + group_column: value + group_columns: { } + group_rows: true + delta_limit: 0 + delta_offset: 0 + delta_reversed: false + delta_first_last: false + multi_type: separator + separator: ', ' + field_api_classes: false + field_rendering: true + fallback_handler: search_api + fallback_options: + link_to_item: false + use_highlighting: false + multi_type: separator + multi_separator: ', ' search_api_media_library_select_form: id: search_api_media_library_select_form table: search_api_index_media @@ -500,6 +572,55 @@ display: auto_create: false auto_create_bundle: '' widget: autocomplete + field_banner_image_restricted: + id: field_banner_image_restricted + table: search_api_index_media + field: field_banner_image_restricted + relationship: none + group_type: group + admin_label: '' + plugin_id: search_api_options + operator: or + value: { } + group: 1 + exposed: true + expose: + operator_id: field_banner_image_restricted_op + label: 'Usage restrictions' + description: '' + use_operator: false + operator: field_banner_image_restricted_op + operator_limit_selection: false + operator_list: { } + identifier: field_banner_image_restricted + required: false + remember: false + multiple: false + remember_roles: + authenticated: authenticated + anonymous: '0' + paragraphs_library_contributor: '0' + layout_editor: '0' + alerts_manager: '0' + block_manager: '0' + system_editor: '0' + system_webmaster: '0' + menu_admin: '0' + administrator: '0' + reduce: false + is_grouped: false + group_info: + label: '' + description: '' + identifier: '' + optional: true + widget: select + multiple: false + remember: false + default_group: All + default_group_multiple: { } + group_items: { } + reduce_duplicates: false filter_groups: operator: AND groups: @@ -537,6 +658,7 @@ display: - url.query_args - user tags: + - 'config:field.storage.media.field_banner_image_restricted' - 'config:search_api.index.media' widget: id: widget @@ -618,6 +740,7 @@ display: - user - user.permissions tags: + - 'config:field.storage.media.field_banner_image_restricted' - 'config:search_api.index.media' widget_table: id: widget_table diff --git a/services/drupal/config/sync/views.view.media_search_api.yml b/services/drupal/config/sync/views.view.media_search_api.yml index 270fac1b9e..fa30348659 100644 --- a/services/drupal/config/sync/views.view.media_search_api.yml +++ b/services/drupal/config/sync/views.view.media_search_api.yml @@ -3,12 +3,14 @@ langcode: en status: true dependencies: config: + - field.storage.media.field_banner_image_restricted - image.style.thumbnail - search_api.index.media - taxonomy.vocabulary.media_tags - user.role.authenticated module: - epa_web_areas + - options - search_api - svg_image - user @@ -1137,6 +1139,7 @@ display: name_1: name_1 web_area_name: web_area_name search_api_rendered_item: name_1 + field_banner_image_restricted: name_1 aggregated_filenames: aggregated_filenames bundle: bundle author_name: author_name @@ -1174,6 +1177,13 @@ display: separator: '' empty_column: false responsive: '' + field_banner_image_restricted: + sortable: false + default_sort_order: asc + align: '' + separator: '' + empty_column: false + responsive: '' aggregated_filenames: sortable: true default_sort_order: asc @@ -1576,6 +1586,75 @@ display: image: link_with_metadata other: link_with_metadata remote_video: link_with_metadata + field_banner_image_restricted: + id: field_banner_image_restricted + table: search_api_index_media + field: field_banner_image_restricted + relationship: none + group_type: group + admin_label: '' + plugin_id: search_api_field + label: '' + exclude: false + alter: + alter_text: false + text: '' + make_link: false + path: '' + absolute: false + external: false + replace_spaces: false + path_case: none + trim_whitespace: false + alt: '' + rel: '' + link_class: '' + prefix: '' + suffix: '' + target: '' + nl2br: false + max_length: 0 + word_boundary: true + ellipsis: true + more_link: false + more_link_text: '' + more_link_path: '' + strip_tags: false + trim: false + preserve_tags: '' + html: false + element_type: '' + element_class: '' + element_label_type: '' + element_label_class: '' + element_label_colon: false + element_wrapper_type: '' + element_wrapper_class: '' + element_default_classes: true + empty: '' + hide_empty: false + empty_zero: false + hide_alter_empty: true + click_sort_column: value + type: list_default + settings: { } + group_column: value + group_columns: { } + group_rows: true + delta_limit: 0 + delta_offset: 0 + delta_reversed: false + delta_first_last: false + multi_type: separator + separator: ', ' + field_api_classes: false + field_rendering: true + fallback_handler: search_api + fallback_options: + link_to_item: false + use_highlighting: false + multi_type: separator + multi_separator: ', ' aggregated_filenames: id: aggregated_filenames table: search_api_index_media @@ -1988,4 +2067,5 @@ display: - user - user.roles tags: + - 'config:field.storage.media.field_banner_image_restricted' - 'config:search_api.index.media' From d4e2e15c98e4c6276e377719278d9053452e13ad Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Tue, 22 Nov 2022 00:47:24 -0700 Subject: [PATCH 44/59] white space wraps on definitions epa claro --- services/drupal/web/themes/epa_claro/css/styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/services/drupal/web/themes/epa_claro/css/styles.css b/services/drupal/web/themes/epa_claro/css/styles.css index 306afc42f9..8caea9b42d 100644 --- a/services/drupal/web/themes/epa_claro/css/styles.css +++ b/services/drupal/web/themes/epa_claro/css/styles.css @@ -32,3 +32,7 @@ font-size: 1.266rem; margin-top: 1em; } + +#definition_pane { + white-space: normal; +} From c8dbd34bf100083a7197cc6601e19d34d9fad55b Mon Sep 17 00:00:00 2001 From: Aimee Rydarowski Date: Tue, 22 Nov 2022 08:35:51 -0500 Subject: [PATCH 45/59] adding description to filter --- .../views.view.group_media_search_api.yml | 2 +- .../sync/views.view.media_search_api.yml | 49 +++++++++++++++++++ 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/services/drupal/config/sync/views.view.group_media_search_api.yml b/services/drupal/config/sync/views.view.group_media_search_api.yml index c0ad69fbb9..5825646b18 100644 --- a/services/drupal/config/sync/views.view.group_media_search_api.yml +++ b/services/drupal/config/sync/views.view.group_media_search_api.yml @@ -952,7 +952,7 @@ display: expose: operator_id: field_banner_image_restricted_op label: 'Usage restrictions' - description: '' + description: 'Show only restricted media.' use_operator: false operator: field_banner_image_restricted_op operator_limit_selection: false diff --git a/services/drupal/config/sync/views.view.media_search_api.yml b/services/drupal/config/sync/views.view.media_search_api.yml index fa30348659..4be50cf360 100644 --- a/services/drupal/config/sync/views.view.media_search_api.yml +++ b/services/drupal/config/sync/views.view.media_search_api.yml @@ -1123,6 +1123,55 @@ display: default_group: All default_group_multiple: { } group_items: { } + field_banner_image_restricted: + id: field_banner_image_restricted + table: search_api_index_media + field: field_banner_image_restricted + relationship: none + group_type: group + admin_label: '' + plugin_id: search_api_options + operator: or + value: { } + group: 1 + exposed: true + expose: + operator_id: field_banner_image_restricted_op + label: 'Usage restrictions' + description: 'Show only restricted media.' + use_operator: false + operator: field_banner_image_restricted_op + operator_limit_selection: false + operator_list: { } + identifier: field_banner_image_restricted + required: false + remember: false + multiple: false + remember_roles: + authenticated: authenticated + anonymous: '0' + paragraphs_library_contributor: '0' + layout_editor: '0' + alerts_manager: '0' + block_manager: '0' + system_editor: '0' + system_webmaster: '0' + menu_admin: '0' + administrator: '0' + reduce: false + is_grouped: false + group_info: + label: '' + description: '' + identifier: '' + optional: true + widget: select + multiple: false + remember: false + default_group: All + default_group_multiple: { } + group_items: { } + reduce_duplicates: false filter_groups: operator: AND groups: From 109e8ee97521e44ab3867266a24049ff9702f933 Mon Sep 17 00:00:00 2001 From: Aimee Rydarowski Date: Tue, 22 Nov 2022 08:54:18 -0500 Subject: [PATCH 46/59] adding another missing description --- services/drupal/config/sync/views.view.media_library.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/drupal/config/sync/views.view.media_library.yml b/services/drupal/config/sync/views.view.media_library.yml index ad9573d8b4..f9f5ccc09a 100644 --- a/services/drupal/config/sync/views.view.media_library.yml +++ b/services/drupal/config/sync/views.view.media_library.yml @@ -528,7 +528,7 @@ display: expose: operator_id: gid_op label: 'Web Area' - description: '' + description: 'Limit to content in your web areas.' use_operator: false operator: gid_op operator_limit_selection: false @@ -587,7 +587,7 @@ display: expose: operator_id: field_banner_image_restricted_op label: 'Usage restrictions' - description: '' + description: 'Show only restricted media.' use_operator: false operator: field_banner_image_restricted_op operator_limit_selection: false From eb9b05eb7b67397334a64d567414d3c57ac1293f Mon Sep 17 00:00:00 2001 From: Aimee Rydarowski Date: Tue, 22 Nov 2022 10:22:28 -0500 Subject: [PATCH 47/59] updating filters to grouped filters --- .../views.view.group_media_search_api.yml | 24 +++++++++++++---- .../config/sync/views.view.media_library.yml | 26 ++++++++++++++----- .../sync/views.view.media_search_api.yml | 24 +++++++++++++---- 3 files changed, 58 insertions(+), 16 deletions(-) diff --git a/services/drupal/config/sync/views.view.group_media_search_api.yml b/services/drupal/config/sync/views.view.group_media_search_api.yml index 5825646b18..e5906c75ac 100644 --- a/services/drupal/config/sync/views.view.group_media_search_api.yml +++ b/services/drupal/config/sync/views.view.group_media_search_api.yml @@ -973,18 +973,32 @@ display: menu_admin: '0' administrator: '0' reduce: false - is_grouped: false + is_grouped: true group_info: - label: '' - description: '' - identifier: '' + label: 'Usage restrictions' + description: 'Show only restricted media.' + identifier: field_banner_image_restricted optional: true widget: select multiple: false remember: false default_group: All default_group_multiple: { } - group_items: { } + group_items: + 1: + title: Unrestricted + operator: not + value: + restricted: restricted + 2: + title: Restricted + operator: or + value: + restricted: restricted + 3: + title: '' + operator: or + value: { } reduce_duplicates: false style: type: table diff --git a/services/drupal/config/sync/views.view.media_library.yml b/services/drupal/config/sync/views.view.media_library.yml index f9f5ccc09a..711f445672 100644 --- a/services/drupal/config/sync/views.view.media_library.yml +++ b/services/drupal/config/sync/views.view.media_library.yml @@ -608,18 +608,32 @@ display: menu_admin: '0' administrator: '0' reduce: false - is_grouped: false + is_grouped: true group_info: - label: '' - description: '' - identifier: '' + label: 'Usage restrictions' + description: 'Show only restricted media.' + identifier: field_banner_image_restricted optional: true widget: select multiple: false remember: false - default_group: All + default_group: '1' default_group_multiple: { } - group_items: { } + group_items: + 1: + title: Unrestricted + operator: not + value: + restricted: restricted + 2: + title: Restricted + operator: or + value: + restricted: restricted + 3: + title: '' + operator: or + value: { } reduce_duplicates: false filter_groups: operator: AND diff --git a/services/drupal/config/sync/views.view.media_search_api.yml b/services/drupal/config/sync/views.view.media_search_api.yml index 4be50cf360..705df99768 100644 --- a/services/drupal/config/sync/views.view.media_search_api.yml +++ b/services/drupal/config/sync/views.view.media_search_api.yml @@ -1159,18 +1159,32 @@ display: menu_admin: '0' administrator: '0' reduce: false - is_grouped: false + is_grouped: true group_info: - label: '' - description: '' - identifier: '' + label: 'Usage restrictions' + description: 'Show only restricted media.' + identifier: field_banner_image_restricted optional: true widget: select multiple: false remember: false default_group: All default_group_multiple: { } - group_items: { } + group_items: + 1: + title: Unrestricted + operator: not + value: + restricted: restricted + 2: + title: Restricted + operator: or + value: + restricted: restricted + 3: + title: '' + operator: or + value: { } reduce_duplicates: false filter_groups: operator: AND From 01a63eef3cc48b7ccad83016b9ae13ac21c833cf Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Tue, 22 Nov 2022 19:55:22 -0700 Subject: [PATCH 48/59] use ckeditor / ckeditor instead of core/ckeditor --- services/drupal/web/themes/epa_claro/epa_claro.info.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/drupal/web/themes/epa_claro/epa_claro.info.yml b/services/drupal/web/themes/epa_claro/epa_claro.info.yml index b17e16ef8d..81ce1ef2e6 100644 --- a/services/drupal/web/themes/epa_claro/epa_claro.info.yml +++ b/services/drupal/web/themes/epa_claro/epa_claro.info.yml @@ -106,7 +106,7 @@ libraries-extend: - claro/ckeditor-editor ckeditor/drupal.ckeditor.admin: - claro/ckeditor-admin - core/ckeditor: + ckeditor/ckeditor: - claro/ckeditor-dialog core/drupal.collapse: - claro/details-focus From ec1c3db40eadf5660071cf84683eb8f6e1670d3c Mon Sep 17 00:00:00 2001 From: Aimee Rydarowski Date: Wed, 23 Nov 2022 11:26:09 -0500 Subject: [PATCH 49/59] adding usage restrictions to media library table display --- .../config/sync/views.view.media_library.yml | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/services/drupal/config/sync/views.view.media_library.yml b/services/drupal/config/sync/views.view.media_library.yml index 711f445672..307d9691be 100644 --- a/services/drupal/config/sync/views.view.media_library.yml +++ b/services/drupal/config/sync/views.view.media_library.yml @@ -1013,6 +1013,76 @@ display: image: link_with_metadata other: link_with_metadata remote_video: link_with_metadata + field_banner_image_restricted: + id: field_banner_image_restricted + table: search_api_datasource_media_entity_media + field: field_banner_image_restricted + relationship: none + group_type: group + admin_label: '' + entity_type: media + plugin_id: search_api_field + label: '' + exclude: false + alter: + alter_text: false + text: '' + make_link: false + path: '' + absolute: false + external: false + replace_spaces: false + path_case: none + trim_whitespace: false + alt: '' + rel: '' + link_class: '' + prefix: '' + suffix: '' + target: '' + nl2br: false + max_length: 0 + word_boundary: true + ellipsis: true + more_link: false + more_link_text: '' + more_link_path: '' + strip_tags: false + trim: false + preserve_tags: '' + html: false + element_type: '' + element_class: '' + element_label_type: '' + element_label_class: '' + element_label_colon: false + element_wrapper_type: '' + element_wrapper_class: '' + element_default_classes: true + empty: '' + hide_empty: false + empty_zero: false + hide_alter_empty: true + click_sort_column: value + type: list_default + settings: { } + group_column: value + group_columns: { } + group_rows: true + delta_limit: 0 + delta_offset: 0 + delta_reversed: false + delta_first_last: false + multi_type: separator + separator: ', ' + field_api_classes: false + field_rendering: true + fallback_handler: search_api + fallback_options: + link_to_item: false + use_highlighting: false + multi_type: separator + multi_separator: ', ' aggregated_filenames: id: aggregated_filenames table: search_api_index_media @@ -1275,6 +1345,7 @@ display: thumbnail: thumbnail name_1: name_1 search_api_rendered_item: name_1 + field_banner_image_restricted: name_1 aggregated_filenames: aggregated_filenames uid_1: uid_1 changed_1: changed_1 @@ -1302,6 +1373,11 @@ display: separator: '' empty_column: false responsive: '' + field_banner_image_restricted: + align: '' + separator: '' + empty_column: false + responsive: '' aggregated_filenames: sortable: true default_sort_order: asc @@ -1378,4 +1454,5 @@ display: - user - user.permissions tags: + - 'config:field.storage.media.field_banner_image_restricted' - 'config:search_api.index.media' From 10085840367e4323c940e796867327168fdc84af Mon Sep 17 00:00:00 2001 From: Aimee Rydarowski Date: Fri, 2 Dec 2022 09:37:34 -0500 Subject: [PATCH 50/59] EPAD8-1846 updates for dropdown placement and help text --- ...ity_form_display.media.banner_image.default.yml | 14 +++++++------- .../sync/views.view.group_media_search_api.yml | 2 +- .../config/sync/views.view.media_search_api.yml | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml b/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml index 5915403c6a..b1fce0da9f 100644 --- a/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml +++ b/services/drupal/config/sync/core.entity_form_display.media.banner_image.default.yml @@ -17,19 +17,19 @@ mode: default content: created: type: datetime_timestamp - weight: 10 + weight: 4 region: content settings: { } third_party_settings: { } field_banner_image_restricted: type: options_select - weight: 101 + weight: 6 region: content settings: { } third_party_settings: { } field_media_image: type: image_focal_point - weight: 0 + weight: 1 region: content settings: progress_indicator: throbber @@ -46,7 +46,7 @@ content: third_party_settings: { } name: type: string_textfield - weight: -5 + weight: 0 region: content settings: size: 60 @@ -54,20 +54,20 @@ content: third_party_settings: { } path: type: path - weight: 30 + weight: 5 region: content settings: { } third_party_settings: { } status: type: boolean_checkbox - weight: 100 + weight: 7 region: content settings: display_label: true third_party_settings: { } uid: type: entity_reference_autocomplete - weight: 5 + weight: 3 region: content settings: match_operator: CONTAINS diff --git a/services/drupal/config/sync/views.view.group_media_search_api.yml b/services/drupal/config/sync/views.view.group_media_search_api.yml index e5906c75ac..34f640804b 100644 --- a/services/drupal/config/sync/views.view.group_media_search_api.yml +++ b/services/drupal/config/sync/views.view.group_media_search_api.yml @@ -976,7 +976,7 @@ display: is_grouped: true group_info: label: 'Usage restrictions' - description: 'Show only restricted media.' + description: 'Restricted or unrestricted.' identifier: field_banner_image_restricted optional: true widget: select diff --git a/services/drupal/config/sync/views.view.media_search_api.yml b/services/drupal/config/sync/views.view.media_search_api.yml index 705df99768..3106159ccb 100644 --- a/services/drupal/config/sync/views.view.media_search_api.yml +++ b/services/drupal/config/sync/views.view.media_search_api.yml @@ -1162,7 +1162,7 @@ display: is_grouped: true group_info: label: 'Usage restrictions' - description: 'Show only restricted media.' + description: 'Restricted or unrestricted.' identifier: field_banner_image_restricted optional: true widget: select From edc433a3f61125227b06fb0604434080603cd362 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Mon, 5 Dec 2022 13:54:42 -0500 Subject: [PATCH 51/59] EPAD8-1749: Install editoria11y module and update settings --- services/drupal/config/sync/core.extension.yml | 1 + .../drupal/config/sync/editoria11y.settings.yml | 15 +++++++++++++++ .../config/sync/user.role.authenticated.yml | 3 +++ .../config/sync/user.role.system_editor.yml | 3 +++ .../config/sync/user.role.system_webmaster.yml | 4 ++++ 5 files changed, 26 insertions(+) create mode 100644 services/drupal/config/sync/editoria11y.settings.yml diff --git a/services/drupal/config/sync/core.extension.yml b/services/drupal/config/sync/core.extension.yml index 2fbf2b6989..16318efb40 100644 --- a/services/drupal/config/sync/core.extension.yml +++ b/services/drupal/config/sync/core.extension.yml @@ -51,6 +51,7 @@ module: dynamic_page_cache: 0 editor: 0 editor_advanced_link: 0 + editoria11y: 0 elasticsearch_connector: 0 embed: 0 entity: 0 diff --git a/services/drupal/config/sync/editoria11y.settings.yml b/services/drupal/config/sync/editoria11y.settings.yml new file mode 100644 index 0000000000..7d2ceeacf1 --- /dev/null +++ b/services/drupal/config/sync/editoria11y.settings.yml @@ -0,0 +1,15 @@ +_core: + default_config_hash: kIV1woSIwQ7BBcHoAOpa8a26XrvI2jcZbfTjDbLysno +content_root: .article +assertiveness: smart +no_load: '' +ignore_all_if_absent: '' +ignore_elements: '.js-toggle-admin-content *' +embedded_content_warning: '' +download_links: '' +ignore_link_strings: '' +hidden_handlers: '' +ed11y_theme: lightTheme +shadow_components: '' +disable_sync: false +preserve_params: 'search,keys,page,language,language_content_entity' diff --git a/services/drupal/config/sync/user.role.authenticated.yml b/services/drupal/config/sync/user.role.authenticated.yml index 301ce5d867..c1be6b1d5b 100644 --- a/services/drupal/config/sync/user.role.authenticated.yml +++ b/services/drupal/config/sync/user.role.authenticated.yml @@ -23,6 +23,7 @@ dependencies: - content_moderation - content_moderation_revert - contextual + - editoria11y - entity_browser - entity_clone - environment_indicator @@ -124,6 +125,7 @@ permissions: - 'execute webform_submission_make_unlock_action webform_submission' - 'execute webform_submission_make_unsticky_action webform_submission' - 'execute webform_unarchive_action webform' + - 'mark as hidden in editoria11y' - 'rabbit hole bypass group' - 'rabbit hole bypass media' - 'reassign group content' @@ -141,6 +143,7 @@ permissions: - 'view all revisions' - 'view any unpublished content' - 'view any webform submission' + - 'view editoria11y checker' - 'view group user last access field' - 'view group user status field' - 'view latest version' diff --git a/services/drupal/config/sync/user.role.system_editor.yml b/services/drupal/config/sync/user.role.system_editor.yml index e172ead39f..8713c65184 100644 --- a/services/drupal/config/sync/user.role.system_editor.yml +++ b/services/drupal/config/sync/user.role.system_editor.yml @@ -7,6 +7,7 @@ dependencies: - workflows.workflow.epa_default module: - content_moderation + - editoria11y - epa_media - filter - node @@ -25,6 +26,7 @@ permissions: - 'access content overview' - 'access private epa_media' - 'delete all revisions' + - 'mark as hidden in editoria11y' - 'revert all revisions' - 'use epa_default transition approve_leave_unpublished' - 'use epa_default transition content_reviewed_republish' @@ -36,5 +38,6 @@ permissions: - 'use epa_default transition unpublish' - 'use text format filtered_html' - 'view any unpublished content' + - 'view editoria11y checker' - 'view latest version' - 'view unpublished paragraphs' diff --git a/services/drupal/config/sync/user.role.system_webmaster.yml b/services/drupal/config/sync/user.role.system_webmaster.yml index 8c0ca2da9e..3275e7d8a3 100644 --- a/services/drupal/config/sync/user.role.system_webmaster.yml +++ b/services/drupal/config/sync/user.role.system_webmaster.yml @@ -20,6 +20,7 @@ dependencies: - block - block_content_permissions - content_moderation + - editoria11y - entity_usage - epa_core - epa_media @@ -88,6 +89,8 @@ permissions: - 'edit paragraph library item' - 'execute node_assign_owner_action node' - 'export news releases' + - 'mark as hidden in editoria11y' + - 'mark as ok in editoria11y' - 'permit news releases' - 'permit perspectives' - 'reassign group content' @@ -113,6 +116,7 @@ permissions: - 'use text format full_html' - 'view all media revisions' - 'view any unpublished content' + - 'view editoria11y checker' - 'view latest version' - 'view paragraphs library listing' - 'view the administration theme' From 83d01c731ba73bbe9185618d43bf5d23eaffd062 Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Mon, 5 Dec 2022 22:57:39 -0700 Subject: [PATCH 52/59] drupal off canvas style updates --- services/drupal/web/themes/epa_claro/css/styles.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/services/drupal/web/themes/epa_claro/css/styles.css b/services/drupal/web/themes/epa_claro/css/styles.css index 306afc42f9..29ed8c65be 100644 --- a/services/drupal/web/themes/epa_claro/css/styles.css +++ b/services/drupal/web/themes/epa_claro/css/styles.css @@ -32,3 +32,15 @@ font-size: 1.266rem; margin-top: 1em; } + +#drupal-off-canvas .inline-block-list { + margin-left: 0; +} + +#drupal-off-canvas .inline-block-list li { + list-style-type: none; +} + +#drupal-off-canvas .inline-block-list li a { + color: #ffffff; +} \ No newline at end of file From 7a65cb166cd7628ca715aa4faedf7126de9940d9 Mon Sep 17 00:00:00 2001 From: Aimee Rydarowski Date: Tue, 6 Dec 2022 08:01:39 -0500 Subject: [PATCH 53/59] updating usage help text for media library --- services/drupal/config/sync/views.view.media_library.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/drupal/config/sync/views.view.media_library.yml b/services/drupal/config/sync/views.view.media_library.yml index 307d9691be..c8b4dbb64e 100644 --- a/services/drupal/config/sync/views.view.media_library.yml +++ b/services/drupal/config/sync/views.view.media_library.yml @@ -611,7 +611,7 @@ display: is_grouped: true group_info: label: 'Usage restrictions' - description: 'Show only restricted media.' + description: 'Restricted or unrestricted.' identifier: field_banner_image_restricted optional: true widget: select From ec68a30a263d47e68822a7174295a3e7735d47ce Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Tue, 6 Dec 2022 21:38:33 -0700 Subject: [PATCH 54/59] update grid image styles --- services/drupal/web/themes/epa_claro/css/styles.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/services/drupal/web/themes/epa_claro/css/styles.css b/services/drupal/web/themes/epa_claro/css/styles.css index 306afc42f9..01f541a5b1 100644 --- a/services/drupal/web/themes/epa_claro/css/styles.css +++ b/services/drupal/web/themes/epa_claro/css/styles.css @@ -32,3 +32,15 @@ font-size: 1.266rem; margin-top: 1em; } + +.media-library-item--grid .form-type--boolean.form-item--no-label { + margin-left: 0.8125rem; + margin-top: 0; +} + +.media-library-item--grid .views-field-field-banner-image-restricted { + font-size: 0.9375rem; + font-weight: bold; + margin-bottom: 0.8125rem; + margin-left: 0.8125rem; +} From a7fd856a8b3b65ea9edef189084f7f5504fd8c00 Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Tue, 6 Dec 2022 22:01:28 -0700 Subject: [PATCH 55/59] style table required --- .../drupal/web/themes/epa_claro/css/styles.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/services/drupal/web/themes/epa_claro/css/styles.css b/services/drupal/web/themes/epa_claro/css/styles.css index 01f541a5b1..a5b9334141 100644 --- a/services/drupal/web/themes/epa_claro/css/styles.css +++ b/services/drupal/web/themes/epa_claro/css/styles.css @@ -33,14 +33,22 @@ margin-top: 1em; } +.media-library-item--grid .views-field-field-banner-image-restricted { + font-size: 0.9375rem; + font-weight: bold; + margin-bottom: 0.625rem; + margin-left: 0.8125rem; +} + .media-library-item--grid .form-type--boolean.form-item--no-label { margin-left: 0.8125rem; margin-top: 0; } -.media-library-item--grid .views-field-field-banner-image-restricted { - font-size: 0.9375rem; +.media-library-item--table .views-field-field-banner-image-restricted { font-weight: bold; - margin-bottom: 0.8125rem; - margin-left: 0.8125rem; } + +.media-library-item--table .views-field-field-banner-image-restricted .media { + font-weight: normal; +} \ No newline at end of file From aed7402e729912c0791c2c04068a056d07040c4e Mon Sep 17 00:00:00 2001 From: Aimee Rydarowski Date: Thu, 8 Dec 2022 15:34:31 -0500 Subject: [PATCH 56/59] Adding Role Theme Switcher Module, Beta Tester role and admin theme config for that role --- services/drupal/composer.json | 1 + services/drupal/composer.lock | 68 ++++++++++++++++++- .../drupal/config/sync/core.extension.yml | 1 + .../environment_indicator.switcher.dev_f1.yml | 1 + ...nt_indicator.switcher.espanol_stage_f1.yml | 1 + ...ronment_indicator.switcher.main_es_f1a.yml | 1 + ...nvironment_indicator.switcher.main_f1a.yml | 1 + .../environment_indicator.switcher.qa_f1.yml | 1 + ...ment_indicator.switcher.release_es_f1a.yml | 1 + ...ronment_indicator.switcher.release_f1a.yml | 1 + ...nvironment_indicator.switcher.stage_f1.yml | 1 + .../sync/group.role.web_area-fc54bfd29.yml | 17 +++++ .../sync/role_theme_switcher.settings.yml | 45 ++++++++++++ ...ction.user_add_role_action.beta_tester.yml | 14 ++++ ...on.user_remove_role_action.beta_tester.yml | 14 ++++ services/drupal/config/sync/system.theme.yml | 2 +- .../config/sync/user.role.beta_tester.yml | 9 +++ 17 files changed, 176 insertions(+), 3 deletions(-) create mode 100644 services/drupal/config/sync/group.role.web_area-fc54bfd29.yml create mode 100644 services/drupal/config/sync/role_theme_switcher.settings.yml create mode 100644 services/drupal/config/sync/system.action.user_add_role_action.beta_tester.yml create mode 100644 services/drupal/config/sync/system.action.user_remove_role_action.beta_tester.yml create mode 100644 services/drupal/config/sync/user.role.beta_tester.yml diff --git a/services/drupal/composer.json b/services/drupal/composer.json index d9877decce..f1a97d9285 100644 --- a/services/drupal/composer.json +++ b/services/drupal/composer.json @@ -304,6 +304,7 @@ "drupal/redirect": "^1.6", "drupal/redirect_metrics": "^1.0@RC", "drupal/role_expose": "^2.0", + "drupal/role_theme_switcher": "^1.2", "drupal/s3fs": "^3.0@beta", "drupal/samlauth": "^3.0", "drupal/scheduled_publish": "^3.9", diff --git a/services/drupal/composer.lock b/services/drupal/composer.lock index 06c96cfb46..fa19b547c7 100644 --- a/services/drupal/composer.lock +++ b/services/drupal/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "954eaf9c91053fb78637a9bb2806f657", + "content-hash": "1246d3135fed6967fd1ca8441928f8c5", "packages": [ { "name": "algolia/places", @@ -8633,6 +8633,70 @@ "issues": "https://www.drupal.org/project/issues/role_expose" } }, + { + "name": "drupal/role_theme_switcher", + "version": "1.2.0", + "source": { + "type": "git", + "url": "https://git.drupalcode.org/project/role_theme_switcher.git", + "reference": "8.x-1.2" + }, + "dist": { + "type": "zip", + "url": "https://ftp.drupal.org/files/projects/role_theme_switcher-8.x-1.2.zip", + "reference": "8.x-1.2", + "shasum": "360864a3c42b4daef3c261a22a539d7e26630d3d" + }, + "require": { + "drupal/core": "^8 || ^9 || ^10" + }, + "type": "drupal-module", + "extra": { + "drupal": { + "version": "8.x-1.2", + "datestamp": "1655383703", + "security-coverage": { + "status": "covered", + "message": "Covered by Drupal's security advisory policy" + } + } + }, + "notification-url": "https://packages.drupal.org/8/downloads", + "license": [ + "GPL-2.0-or-later" + ], + "authors": [ + { + "name": "Julien Dubreuil", + "homepage": "https://www.drupal.org/u/juliend", + "email": "dubreuil.julien@gmail.com", + "role": "Maintainer" + }, + { + "name": "Neslee Canil Pinto", + "homepage": "https://www.drupal.org/u/neslee-canil-pinto", + "role": "Maintainer" + }, + { + "name": "Pravin Ajaaz", + "homepage": "https://www.drupal.org/user/2910049" + }, + { + "name": "tiutiun", + "homepage": "https://www.drupal.org/user/158669" + } + ], + "description": "Assign a specific theme for different roles.", + "homepage": "https://www.drupal.org/project/role_theme_switcher", + "keywords": [ + "Drupal", + "Theme" + ], + "support": { + "source": "https://git.drupalcode.org/project/role_theme_switcher", + "issues": "https://www.drupal.org/project/issues/role_theme_switcher" + } + }, { "name": "drupal/s3fs", "version": "3.0.0-beta4", @@ -21070,5 +21134,5 @@ "ext-pdo": "1.0.0", "php": "8.0" }, - "plugin-api-version": "2.3.0" + "plugin-api-version": "2.2.0" } diff --git a/services/drupal/config/sync/core.extension.yml b/services/drupal/config/sync/core.extension.yml index b50a5941d3..e4a531e753 100644 --- a/services/drupal/config/sync/core.extension.yml +++ b/services/drupal/config/sync/core.extension.yml @@ -168,6 +168,7 @@ module: rh_node: 0 rh_taxonomy: 0 role_expose: 0 + role_theme_switcher: 0 s3fs: 0 samlauth: 0 scheduled_publish: 0 diff --git a/services/drupal/config/sync/environment_indicator.switcher.dev_f1.yml b/services/drupal/config/sync/environment_indicator.switcher.dev_f1.yml index 382f3c4832..c9e4152095 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.dev_f1.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.dev_f1.yml @@ -5,6 +5,7 @@ dependencies: { } machine: dev_f1 description: null name: Dev +weight: null url: 'https://dev.epa.byf1.io' path: null fg_color: '#000000' diff --git a/services/drupal/config/sync/environment_indicator.switcher.espanol_stage_f1.yml b/services/drupal/config/sync/environment_indicator.switcher.espanol_stage_f1.yml index aeac6349bf..1bf12373ac 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.espanol_stage_f1.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.espanol_stage_f1.yml @@ -5,6 +5,7 @@ dependencies: { } machine: espanol_stage_f1 description: null name: 'Espanol stage' +weight: null url: 'https://espanol.epa.byf1.io' path: null fg_color: '#000000' diff --git a/services/drupal/config/sync/environment_indicator.switcher.main_es_f1a.yml b/services/drupal/config/sync/environment_indicator.switcher.main_es_f1a.yml index 694292012b..526a936d9a 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.main_es_f1a.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.main_es_f1a.yml @@ -5,6 +5,7 @@ dependencies: { } machine: main_es_f1a description: null name: 'Main - Espanol' +weight: null url: 'https://main-es.epa.byf1.dev' path: null fg_color: '#000000' diff --git a/services/drupal/config/sync/environment_indicator.switcher.main_f1a.yml b/services/drupal/config/sync/environment_indicator.switcher.main_f1a.yml index 5f139e4c88..b2b92a0207 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.main_f1a.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.main_f1a.yml @@ -5,6 +5,7 @@ dependencies: { } machine: main_f1a description: null name: Main +weight: null url: 'https://main.epa.byf1.dev' path: null fg_color: '#000000' diff --git a/services/drupal/config/sync/environment_indicator.switcher.qa_f1.yml b/services/drupal/config/sync/environment_indicator.switcher.qa_f1.yml index 52f4492904..f7ae4715e8 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.qa_f1.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.qa_f1.yml @@ -5,6 +5,7 @@ dependencies: { } machine: qa_f1 description: null name: QA +weight: null url: 'https://qa.epa.byf1.io' path: null fg_color: '#000000' diff --git a/services/drupal/config/sync/environment_indicator.switcher.release_es_f1a.yml b/services/drupal/config/sync/environment_indicator.switcher.release_es_f1a.yml index d642c28725..3a3776059a 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.release_es_f1a.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.release_es_f1a.yml @@ -5,6 +5,7 @@ dependencies: { } machine: release_es_f1a description: null name: 'Release - Espanol' +weight: null url: 'https://release-es.epa.byf1.dev' path: null fg_color: '#000000' diff --git a/services/drupal/config/sync/environment_indicator.switcher.release_f1a.yml b/services/drupal/config/sync/environment_indicator.switcher.release_f1a.yml index 1f94201e88..58fdb9cb0f 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.release_f1a.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.release_f1a.yml @@ -5,6 +5,7 @@ dependencies: { } machine: release_f1a description: null name: Release +weight: null url: 'https://release.epa.byf1.dev' path: null fg_color: '#000000' diff --git a/services/drupal/config/sync/environment_indicator.switcher.stage_f1.yml b/services/drupal/config/sync/environment_indicator.switcher.stage_f1.yml index 28719d5887..6912d44248 100644 --- a/services/drupal/config/sync/environment_indicator.switcher.stage_f1.yml +++ b/services/drupal/config/sync/environment_indicator.switcher.stage_f1.yml @@ -5,6 +5,7 @@ dependencies: { } machine: stage_f1 description: null name: Stage +weight: null url: 'https://stage.epa.byf1.io' path: null fg_color: '#000000' diff --git a/services/drupal/config/sync/group.role.web_area-fc54bfd29.yml b/services/drupal/config/sync/group.role.web_area-fc54bfd29.yml new file mode 100644 index 0000000000..00ca14ad92 --- /dev/null +++ b/services/drupal/config/sync/group.role.web_area-fc54bfd29.yml @@ -0,0 +1,17 @@ +uuid: a23cabc5-9309-44ee-a6a3-ec6c64512286 +langcode: en +status: true +dependencies: + config: + - group.type.web_area + enforced: + config: + - user.role.beta_tester +id: web_area-fc54bfd29 +label: 'Beta Tester' +weight: 0 +internal: true +audience: outsider +group_type: web_area +permissions_ui: false +permissions: { } diff --git a/services/drupal/config/sync/role_theme_switcher.settings.yml b/services/drupal/config/sync/role_theme_switcher.settings.yml new file mode 100644 index 0000000000..e549dfd092 --- /dev/null +++ b/services/drupal/config/sync/role_theme_switcher.settings.yml @@ -0,0 +1,45 @@ +roles: + anonymous: + theme: '' + weight: '-49' + admin_theme: '' + authenticated: + theme: '' + weight: '-48' + admin_theme: '' + paragraphs_library_contributor: + theme: '' + weight: '-47' + admin_theme: '' + layout_editor: + theme: '' + weight: '-46' + admin_theme: '' + alerts_manager: + theme: '' + weight: '-45' + admin_theme: '' + block_manager: + theme: '' + weight: '-44' + admin_theme: '' + system_editor: + theme: '' + weight: '-43' + admin_theme: '' + system_webmaster: + theme: '' + weight: '-42' + admin_theme: '' + menu_admin: + theme: '' + weight: '-41' + admin_theme: '' + administrator: + theme: '' + weight: '-40' + admin_theme: '' + beta_tester: + theme: '' + weight: '-50' + admin_theme: epa_claro diff --git a/services/drupal/config/sync/system.action.user_add_role_action.beta_tester.yml b/services/drupal/config/sync/system.action.user_add_role_action.beta_tester.yml new file mode 100644 index 0000000000..f1c17c074f --- /dev/null +++ b/services/drupal/config/sync/system.action.user_add_role_action.beta_tester.yml @@ -0,0 +1,14 @@ +uuid: ec4efd9d-e046-4eb4-bf4e-d4235f36f4ee +langcode: en +status: true +dependencies: + config: + - user.role.beta_tester + module: + - user +id: user_add_role_action.beta_tester +label: 'Add the Beta Tester role to the selected user(s)' +type: user +plugin: user_add_role_action +configuration: + rid: beta_tester diff --git a/services/drupal/config/sync/system.action.user_remove_role_action.beta_tester.yml b/services/drupal/config/sync/system.action.user_remove_role_action.beta_tester.yml new file mode 100644 index 0000000000..e0b3c7d4ae --- /dev/null +++ b/services/drupal/config/sync/system.action.user_remove_role_action.beta_tester.yml @@ -0,0 +1,14 @@ +uuid: 309e78f3-569b-4229-ab67-44f56d60ec05 +langcode: en +status: true +dependencies: + config: + - user.role.beta_tester + module: + - user +id: user_remove_role_action.beta_tester +label: 'Remove the Beta Tester role from the selected user(s)' +type: user +plugin: user_remove_role_action +configuration: + rid: beta_tester diff --git a/services/drupal/config/sync/system.theme.yml b/services/drupal/config/sync/system.theme.yml index fc03f0cac9..6cbca9bae4 100644 --- a/services/drupal/config/sync/system.theme.yml +++ b/services/drupal/config/sync/system.theme.yml @@ -1,4 +1,4 @@ _core: default_config_hash: 6lQ55NXM9ysybMQ6NzJj4dtiQ1dAkOYxdDompa-r_kk -admin: epa_claro +admin: epa_seven default: epa_theme diff --git a/services/drupal/config/sync/user.role.beta_tester.yml b/services/drupal/config/sync/user.role.beta_tester.yml new file mode 100644 index 0000000000..f61dcef63a --- /dev/null +++ b/services/drupal/config/sync/user.role.beta_tester.yml @@ -0,0 +1,9 @@ +uuid: bb04e05b-a23b-4909-b304-19f136098885 +langcode: en +status: true +dependencies: { } +id: beta_tester +label: 'Beta Tester' +weight: 0 +is_admin: null +permissions: { } From e0f6296a7be9e79b2ac70685cb285ecdc4e1cde5 Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Wed, 21 Dec 2022 02:24:59 -0700 Subject: [PATCH 57/59] spacing + restricted updated for seven too --- .../themes/epa_seven/css/base/elements.css | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/services/drupal/web/themes/epa_seven/css/base/elements.css b/services/drupal/web/themes/epa_seven/css/base/elements.css index d30c3c1977..011d56b5c1 100644 --- a/services/drupal/web/themes/epa_seven/css/base/elements.css +++ b/services/drupal/web/themes/epa_seven/css/base/elements.css @@ -40,3 +40,27 @@ .views-exposed-form .form--inline .form-item .field-suffix { display: block; } + +.media-library-item--grid .media-library-item__attributes { + bottom: auto; + left: 35px; + max-width: calc(100% - 53px); +} + +.media-library-item--grid .views-field-field-banner-image-restricted { + bottom: 50px; + font-size: 0.9375rem; + font-weight: bold; + left: 10px; + position: absolute; + right: 10px; + text-align: center; +} + +.media-library-item--table .views-field-field-banner-image-restricted { + font-weight: bold; +} + +.media-library-item--table .views-field-field-banner-image-restricted .media { + font-weight: normal; +} From 290ff8bf88ceef6bb88ef147bdb33650e6bdf237 Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Mon, 16 Jan 2023 00:12:33 -0700 Subject: [PATCH 58/59] transparent button background, svg arrow fill white --- .../05-components/image-gallery/_image-gallery.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/_image-gallery.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/_image-gallery.scss index 24a937aaa4..bd7eca7bfa 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/_image-gallery.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/_image-gallery.scss @@ -105,3 +105,14 @@ $image-gallery-button-size: 44px; @extend %image-gallery__button; right: 0; } + +.image-gallery__prev, +.image-gallery__next { + .usa-dark-background & { + background: transparent; + + svg { + fill: gesso-grayscale(white); + } + } +} From 4a21dfafbcdbb683ff9d2fc9733ac369e41ed1c3 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Wed, 1 Feb 2023 13:24:36 -0500 Subject: [PATCH 59/59] Limit permission to use Editoria11y to admins and system webmasters --- services/drupal/config/sync/system.mail.yml | 1 + services/drupal/config/sync/user.role.authenticated.yml | 3 --- services/drupal/config/sync/user.role.system_editor.yml | 3 --- 3 files changed, 1 insertion(+), 6 deletions(-) diff --git a/services/drupal/config/sync/system.mail.yml b/services/drupal/config/sync/system.mail.yml index ca57f8ee65..68e9719d92 100644 --- a/services/drupal/config/sync/system.mail.yml +++ b/services/drupal/config/sync/system.mail.yml @@ -2,3 +2,4 @@ _core: default_config_hash: rYgt7uhPafP2ngaN_ZUPFuyI4KdE0zU868zLNSlzKoE interface: default: SMTPMailSystem + webform: webform_php_mail diff --git a/services/drupal/config/sync/user.role.authenticated.yml b/services/drupal/config/sync/user.role.authenticated.yml index 8b3848051c..773d2a965c 100644 --- a/services/drupal/config/sync/user.role.authenticated.yml +++ b/services/drupal/config/sync/user.role.authenticated.yml @@ -23,7 +23,6 @@ dependencies: - content_moderation - content_moderation_revert - contextual - - editoria11y - entity_browser - entity_clone - environment_indicator @@ -129,7 +128,6 @@ permissions: - 'execute webform_submission_make_unsticky_action webform_submission' - 'execute webform_unarchive_action webform' - 'flag notification_opt_in' - - 'mark as hidden in editoria11y' - 'rabbit hole bypass group' - 'rabbit hole bypass media' - 'reassign group content' @@ -148,7 +146,6 @@ permissions: - 'view all revisions' - 'view any unpublished content' - 'view any webform submission' - - 'view editoria11y checker' - 'view group user last access field' - 'view group user status field' - 'view latest version' diff --git a/services/drupal/config/sync/user.role.system_editor.yml b/services/drupal/config/sync/user.role.system_editor.yml index 8713c65184..e172ead39f 100644 --- a/services/drupal/config/sync/user.role.system_editor.yml +++ b/services/drupal/config/sync/user.role.system_editor.yml @@ -7,7 +7,6 @@ dependencies: - workflows.workflow.epa_default module: - content_moderation - - editoria11y - epa_media - filter - node @@ -26,7 +25,6 @@ permissions: - 'access content overview' - 'access private epa_media' - 'delete all revisions' - - 'mark as hidden in editoria11y' - 'revert all revisions' - 'use epa_default transition approve_leave_unpublished' - 'use epa_default transition content_reviewed_republish' @@ -38,6 +36,5 @@ permissions: - 'use epa_default transition unpublish' - 'use text format filtered_html' - 'view any unpublished content' - - 'view editoria11y checker' - 'view latest version' - 'view unpublished paragraphs'