@cagovweb/state-template 6.5.5 → 6.6.0-beta2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/css/cagov.core.css +1101 -517
  2. package/dist/css/cagov.core.flat.css +1009 -404
  3. package/dist/css/cagov.core.min.css +1 -1
  4. package/dist/css/colortheme-delta.css +4 -0
  5. package/dist/css/colortheme-delta.min.css +1 -1
  6. package/dist/css/colortheme-eureka.css +4 -0
  7. package/dist/css/colortheme-eureka.min.css +1 -1
  8. package/dist/css/colortheme-mono.css +4 -0
  9. package/dist/css/colortheme-mono.min.css +1 -1
  10. package/dist/css/colortheme-oceanside.css +4 -0
  11. package/dist/css/colortheme-oceanside.min.css +1 -1
  12. package/dist/css/colortheme-orangecounty.css +4 -0
  13. package/dist/css/colortheme-orangecounty.min.css +1 -1
  14. package/dist/css/colortheme-pasorobles.css +4 -0
  15. package/dist/css/colortheme-pasorobles.min.css +1 -1
  16. package/dist/css/colortheme-sacramento.css +4 -0
  17. package/dist/css/colortheme-sacramento.min.css +1 -1
  18. package/dist/css/colortheme-santabarbara.css +4 -0
  19. package/dist/css/colortheme-santabarbara.min.css +1 -1
  20. package/dist/css/colortheme-santacruz.css +4 -0
  21. package/dist/css/colortheme-santacruz.min.css +1 -1
  22. package/dist/css/colortheme-shasta.css +4 -0
  23. package/dist/css/colortheme-shasta.min.css +1 -1
  24. package/dist/css/colortheme-sierra.css +4 -0
  25. package/dist/css/colortheme-sierra.min.css +1 -1
  26. package/dist/css/colortheme-trinity.css +4 -0
  27. package/dist/css/colortheme-trinity.min.css +1 -1
  28. package/dist/css/colortheme-ukiah-night.css +292 -0
  29. package/dist/css/colortheme-ukiah-night.min.css +1 -0
  30. package/dist/css/colortheme-ventura-night.css +279 -0
  31. package/dist/css/colortheme-ventura-night.min.css +1 -0
  32. package/dist/js/cagov.core.js +120 -53
  33. package/dist/js/cagov.core.min.js +2 -2
  34. package/dist/readme.md +2 -2
  35. package/package.json +2 -2
@@ -1,4 +1,5 @@
1
- /*! State Web Template Version 6.5.5 */
1
+
2
+ /*! State Web Template Version 6.6.0-beta2 */
2
3
  @charset "UTF-8";
3
4
  /*!
4
5
  * Bootstrap v5.3.8 (https://getbootstrap.com/)
@@ -12107,16 +12108,28 @@ textarea.form-control-lg {
12107
12108
  --share-github: #25292e;
12108
12109
  --btn-default-color: var(--gray-900);
12109
12110
  --text-color: var(--gray-900, #3b3a48);
12111
+ --text-color-hover: var(--black, #000);
12112
+ --text-secondary: var(--gray-800, #4a4958);
12110
12113
  --text-muted: var(--gray-700, #5e5e6a);
12111
12114
  --link-color: var(--brand-primary, #046b99);
12112
- --link-hover-color: var(--brand-primary-darkest, #005a7f);
12115
+ --link-color-hover: var(--brand-primary-darkest, #005a7f);
12113
12116
  --body-bg: var(--white);
12117
+ --base-light: var(--white);
12118
+ --base-dark: var(--black);
12119
+ --default-bg: var(--gray-50);
12120
+ --default-bg-darker: var(--gray-100);
12121
+ --default-bg-hover: var(--gray-75);
12122
+ --default-bg-hover-darker: var(--gray-100);
12114
12123
  --outline-default-color: #0b8ee5;
12115
12124
  --outline-dark-mode-color: #85cbf9;
12116
- --font-family-sans-serif: "Public Sans", system-ui, -apple-system, "Segoe UI",
12117
- "Roboto", "Helvetica Neue", "Noto Sans", sans-serif;
12125
+ --outline-for-dark-bg: #85cbf9;
12126
+ --outline-for-light-bg: #0b8ee5;
12127
+ --font-family-sans-serif:
12128
+ "Public Sans", system-ui, -apple-system, "Segoe UI", "Roboto",
12129
+ "Helvetica Neue", "Noto Sans", sans-serif;
12118
12130
  --font-family-serif: "Merriweather", "Times New Roman", serif;
12119
- --font-family-monospace: menlo, monaco, consolas, "Courier New", monospace !default;
12131
+ --font-family-monospace:
12132
+ menlo, monaco, consolas, "Courier New", monospace !default;
12120
12133
  --font-size-base: 1rem;
12121
12134
  --font-size-regular: calc(var(--font-size-base, 1rem) * 1.125);
12122
12135
  --font-size-large: calc(var(--font-size-base, 1rem) * 1.4375);
@@ -12164,6 +12177,8 @@ textarea.form-control-lg {
12164
12177
  --padding-xs-horizontal: 5px;
12165
12178
  --line-height-large: 1.3;
12166
12179
  --line-height-small: 1.5;
12180
+ --border-color-default: var(--gray-200, #d4d4d7);
12181
+ --border-color-muted: var(--gray-100, #ededef);
12167
12182
  --border-radius-base: 0;
12168
12183
  --border-radius-large: 6px;
12169
12184
  --border-radius-small: 3px;
@@ -12199,10 +12214,34 @@ textarea.form-control-lg {
12199
12214
  --alert-danger-border: color-mix(in srgb, var(--state-danger-bg), #000 7%);
12200
12215
  --blockquote-border-color: var(--gray-100, #ededef) !default;
12201
12216
  --text-field-color: rgba(255 255 255 / 80%);
12217
+ --text-field-bg-color: var(--white, #fff);
12202
12218
  --ca-gov-logo: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8192 4563'><defs><linearGradient id='grad1' y1='2329' x2='0' y2='4499' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%238b5a24'/><stop offset='1' stop-color='%23441a12'/></linearGradient><linearGradient id='grad2' y1='396' x2='0' y2='4498' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%231b93b8'/><stop offset='.6' stop-color='%231b93b8'/><stop offset='1' stop-color='%2304628d'/></linearGradient></defs><path fill='url(%23grad1)' d='M7850 3454l-4 2c-6-125-108-382-197-463 39-115-15-173-46-212-18-23-79-39-106-49-97-147-304-280-593-365-188-55-410-91-661-96-11 0-24-1-37-1-25 0-53 1-84 3-230 13-583 64-665 64h-7c-35-2-120-40-221-79-119-47-257-98-360-98 0 0-21 0-31 2-97 12-324 157-409 203-58 32-335 150-345 153-133 45-227 197-267 223-4-16-54-86-125-86s-17 1-25 3c-86 36-80 99-80 130-17-7-42-38-89-37s-37 4-59 14c-95 51-44 134-66 163-34 45-146 157-188 234-18 32 2 115-12 148-37 91-238 251-256 288-7 17 47 71 114 123 61 48 82 79 175 104s385-51 443-57h1c17 0 47 11 86 21 34 9 75 17 121 17s26 0 39-2c60-13 100-40 133-73 54-55 86-125 148-152 47-21 108-37 161-37s50 4 70 13c-99 177-77 414-112 448-39 37-69 76-92 113-85 130-97 248-137 276-11 8-26 10-42 10-46 0-109-22-154-22s-20 1-29 4c-53 19-176 133-131 160 14 1 216 1 428 1h184c6 0 118-103 124-103h299c28-4 25-49 154-115 146-57 76-339 263-554 2 0 57-52 70-52 65 0 174 118 566 118s487-135 541-135 81 41 81 54c-175 298 266 632 230 653-1 1-3 1-4 1-15 0-58-24-122-24s-55 4-87 15c-72 24-129 114-74 141 15 0 190 1 364 1s194 0 263-1c22-3 20-45 19-86-1-27-1-53 5-68 18-24 35-108 81-167 46-50 81-89 119-89s31 7 47 21c83 45 282 70 395 111 47 17 80 36 82 62-2 14-13 18-29 18s-15-1-23-2c-28-4-64-13-99-13s-36 3-52 9c-51 19-103 75-118 116-8 22-5 40 16 45h470c54 0 34-108 154-348 18-68-151-160-175-288-16-84-32-250-34-412l3-1 1-1hZ'/><path fill='url(%23grad2)' d='M5362 193h774l711 1843c-187-43-388-67-598-72h-44c-30 0-61 1-90 3h-10c-13 1-26 2-39 3l-312-807-327 846c-9-4-18-8-27-11-19-8-39-16-59-24-156-62-269-113-422-121-153-7-208 25-208 25l651-1685ZM2279 4542c478 0 838-95 1157-264l69-174c-113 17-258 49-374 21s-180-75-289-161c-42-33-109-87-161-159-120 28-248 43-389 43-924 0-1569-643-1569-1563s681-1568 1550-1550c476 10 919 194 1318 593l283-718C3432 236 2874 30 2292 30S1107 249 685 646C246 1058 4 1639 4 2281c0 1332 936 2262 2275 2262v-1h0Z'/><path fill='%23b91f39' d='M2886 1844l-148-424-148 424h-446l361 276-128 424 361-276 361 276-128-424 361-276h-446 1-Z'/></svg>")
12203
12219
  no-repeat;
12204
12220
  --is-mobile: 0;
12221
+
12222
+ /* utility header */
12223
+ --utility-link: #000;
12224
+ --utility-link-hover: #4a4958;
12225
+ --utility-header-background: #eef8fb;
12226
+
12227
+ /* main nav */
12228
+ --mobile-menu-icon-color: var(--brand-primary);
12229
+ --main-nav-color: var(--brand-primary);
12230
+ --main-nav-color-hover: var(--gray-900);
12231
+ --main-nav-bg: var(--white);
12232
+ --main-nav-bg-hover: var(--gray-50);
12233
+ --main-nav-border-color: var(--gray-200);
12234
+ --main-nav-color-active: var(--black);
12235
+ --main-nav-color-active-hover: var(--gray-800);
12236
+ --main-nav-bg-active: var(--gray-50);
12237
+ --main-nav-bg-active-hover: var(--gray-100);
12238
+
12239
+ /* global footer */
12240
+ --global-footer-bg: var(--gray-50);
12241
+ --footer-links-color: var(--black);
12242
+ --footer-links-color-hover: var(--gray-800);
12205
12243
  }
12244
+
12206
12245
  @media (width <= 991px) {
12207
12246
  :root {
12208
12247
  --is-mobile: 1;
@@ -12265,6 +12304,10 @@ textarea.form-control-lg {
12265
12304
  /* Mobile navigation drawer background */
12266
12305
  --mobile-drawer: var(--color-p2-darker);
12267
12306
  --mobile-drawer-active: var(--color-p2);
12307
+
12308
+ /* Global */
12309
+ --link-color: var(--color-p2);
12310
+ --link-color-hover: var(--color-p2-darker);
12268
12311
  }
12269
12312
 
12270
12313
  /* color-mix is used for the newer browsers */
@@ -14427,7 +14470,7 @@ textarea.form-control-lg {
14427
14470
  body {
14428
14471
  font: var(--font-size-regular) / var(--line-height-base)
14429
14472
  var(--font-family-sans-serif);
14430
- color: var(--gray-900, #3b3a48);
14473
+ color: var(--text-color, #3b3a48);
14431
14474
  overflow-y: scroll;
14432
14475
 
14433
14476
  @media (width >= 576px) {
@@ -14436,11 +14479,11 @@ body {
14436
14479
  }
14437
14480
 
14438
14481
  a {
14439
- color: var(--color-p2, #046b99);
14482
+ color: var(--link-color, #046b99);
14440
14483
 
14441
14484
  &:hover,
14442
14485
  &:focus {
14443
- color: var(--color-p2-darker, #214a68);
14486
+ color: var(--link-color-hover, #214a68);
14444
14487
  }
14445
14488
 
14446
14489
  &:focus {
@@ -14706,6 +14749,12 @@ svg ~ .external-link-icon,
14706
14749
  display: none;
14707
14750
  }
14708
14751
 
14752
+ .socialsharer-container a.cagov-external-link::after,
14753
+ a[class*="ca-gov-icon-"].cagov-external-link::after {
14754
+ content: none;
14755
+ display: none;
14756
+ }
14757
+
14709
14758
  /* stylelint-disable-next-line no-descending-specificity */
14710
14759
  .icon-abs-right .external-link-icon {
14711
14760
  position: absolute;
@@ -14933,7 +14982,7 @@ a.list-group-item {
14933
14982
 
14934
14983
  /* Default layout is 1 column */
14935
14984
  .main-content {
14936
- background: #fff;
14985
+ background: var(--body-bg, #fff);
14937
14986
  min-height: 400px;
14938
14987
 
14939
14988
  > .section {
@@ -15027,7 +15076,8 @@ a.list-group-item {
15027
15076
  left: 50% !important;
15028
15077
  transform: translateX(-50%);
15029
15078
  clip: unset;
15030
- background-color: white;
15079
+ background-color: var(--body-bg, #fff);
15080
+ color: var(--text-color, #292b2c);
15031
15081
  border-radius: 0 0 7px 7px;
15032
15082
  overflow: hidden;
15033
15083
 
@@ -15042,31 +15092,30 @@ a.list-group-item {
15042
15092
  position: relative;
15043
15093
  z-index: 1;
15044
15094
  padding: 0;
15045
- background: var(--white, #fff);
15095
+ background: var(--body-bg, #fff);
15046
15096
  width: auto;
15047
15097
 
15048
15098
  .section-default {
15049
- background-color: var(--white, #fff);
15099
+ background-color: var(--body-bg, #fff);
15050
15100
 
15051
15101
  @media (width >= 992px) {
15052
- border-bottom: 1px solid var(--gray-200, #d4d4d7);
15102
+ border-bottom: 1px solid var(--border-color-default, #d4d4d7);
15053
15103
  }
15054
15104
 
15055
15105
  &::after {
15056
15106
  content: "";
15057
- border-bottom: 1px solid var(--gray-200, #d4d4d7);
15107
+ border-bottom: 1px solid var(--border-color-default, #d4d4d7);
15058
15108
  position: absolute;
15059
15109
  width: 100%;
15060
15110
  left: 0;
15061
-
15062
- @media (width >= 992px) {
15111
+ ` @media (width >= 992px) {
15063
15112
  border-bottom: none;
15064
15113
  }
15065
15114
  }
15066
15115
  }
15067
15116
 
15068
15117
  @media (width >= 992px) {
15069
- border-bottom: 1px solid var(--gray-200, #d4d4d7);
15118
+ border-bottom: 1px solid var(--border-color-default, #d4d4d7);
15070
15119
 
15071
15120
  .section-default {
15072
15121
  &::after {
@@ -15323,7 +15372,7 @@ h2 {
15323
15372
  font: 1rem var(--font-family-sans-serif);
15324
15373
  margin: 0;
15325
15374
  padding: 0;
15326
- color: var(--gray-900, #3b3a48);
15375
+ color: var(--text-color, #3b3a48);
15327
15376
  height: 20px;
15328
15377
  line-height: 1.2em;
15329
15378
  transition: all 0.3s;
@@ -15338,7 +15387,7 @@ h2 {
15338
15387
  font: 700 1.75rem var(--font-family-sans-serif);
15339
15388
  margin: 0;
15340
15389
  padding: 0;
15341
- color: var(--color-p3, #323a45);
15390
+ color: var(--text-color, #3b3a48);
15342
15391
  height: 24px;
15343
15392
  line-height: 1.2em;
15344
15393
  transition: all 0.3s;
@@ -15423,8 +15472,8 @@ h2 {
15423
15472
  ----------------------------------------- */
15424
15473
 
15425
15474
  .global-footer {
15426
- background-color: var(--gray-50, #fafafa);
15427
- border-top: 1px solid var(--gray-200, #d4d4d7);
15475
+ background-color: var(--global-footer-bg, var(--gray-50, #fafafa));
15476
+ border-top: 1px solid var(--border-color-default, var(--gray-200, #d4d4d7));
15428
15477
  padding-top: 1rem;
15429
15478
 
15430
15479
  .container .d-flex {
@@ -15483,11 +15532,11 @@ h2 {
15483
15532
  margin-right: 20px;
15484
15533
 
15485
15534
  & a {
15486
- color: var(--black, #000);
15535
+ color: var(--footer-links-color, var(--black, #000));
15487
15536
  text-decoration: none;
15488
15537
 
15489
15538
  &:hover {
15490
- color: var(--gray-800, #4a4958);
15539
+ color: var(--footer-links-color-hover, var(--gray-800, #4a4958));
15491
15540
  }
15492
15541
  }
15493
15542
  }
@@ -15554,7 +15603,7 @@ h2 {
15554
15603
  color: var(--white, #fff);
15555
15604
 
15556
15605
  &:focus {
15557
- outline: 2px solid var(--outline-dark-mode-color);
15606
+ outline: 2px solid var(--outline-for-dark-bg);
15558
15607
  outline-offset: -4px;
15559
15608
  }
15560
15609
 
@@ -15570,7 +15619,7 @@ h2 {
15570
15619
 
15571
15620
  @media (width <= 991px) {
15572
15621
  background-color: var(--white, #fff);
15573
- border-color: var(--white, #fff);
15622
+ border-color: var(--gray-600, #72717c);
15574
15623
 
15575
15624
  .ca-gov-icon-search {
15576
15625
  color: var(--gray-700, #5e5e6a);
@@ -15579,7 +15628,8 @@ h2 {
15579
15628
  &:hover,
15580
15629
  &:focus {
15581
15630
  background-color: var(--gray-50, #fafafa);
15582
- border-color: var(--gray-50, #fafafa);
15631
+ outline: var(--outline-for-light-bg, #0b8ee5);
15632
+ outline-offset: -2px;
15583
15633
 
15584
15634
  .ca-gov-icon-search {
15585
15635
  color: var(--gray-900, #3b3a48);
@@ -15597,7 +15647,7 @@ h2 {
15597
15647
  transition: border 0.4s;
15598
15648
 
15599
15649
  &::placeholder {
15600
- color: var(--black, #000);
15650
+ color: var(--text-field-color, #000);
15601
15651
  opacity: 1;
15602
15652
  }
15603
15653
 
@@ -15613,7 +15663,7 @@ h2 {
15613
15663
  height: 40px;
15614
15664
  transition: all 0.5s 0.1s;
15615
15665
 
15616
- button {
15666
+ & button {
15617
15667
  float: left;
15618
15668
  transition: all 0.5s 0.1s;
15619
15669
  background: none;
@@ -15648,17 +15698,15 @@ h2 {
15648
15698
  }
15649
15699
  }
15650
15700
 
15651
- input[type="search"].search-textfield {
15701
+ & input[type="search"].search-textfield {
15652
15702
  -webkit-appearance: none;
15653
- background-color: canvas;
15654
- border: 1px solid #72717c;
15703
+ background-color: var(--text-field-bg-color, #fff);
15704
+ border: 1px solid var(--gray-600, #72717c);
15655
15705
  border-radius: 5px 0 0 5px;
15656
15706
  }
15657
15707
 
15658
15708
  @media (width <= 991px) {
15659
15709
  input[type="search"].search-textfield {
15660
- border-color: var(--white, #fff);
15661
-
15662
15710
  &:focus {
15663
15711
  outline-offset: -4px;
15664
15712
  }
@@ -15672,6 +15720,22 @@ input[type="search"].search-textfield {
15672
15720
  .cse .gsc-control-cse,
15673
15721
  .gsc-control-cse {
15674
15722
  padding: 0 !important;
15723
+ background-color: var(--body-bg, #fff) !important;
15724
+ border-color: var(--body-bg, #fff) !important;
15725
+ }
15726
+
15727
+ .gsc-webResult.gsc-result,
15728
+ .gsc-results .gsc-imageResult {
15729
+ background-color: var(--body-bg, #fff) !important;
15730
+ border-color: var(--body-bg, #fff) !important;
15731
+ }
15732
+
15733
+ .gsc-result-info-container .gsc-result-info {
15734
+ color: var(--text-muted, #5e5e6a);
15735
+ }
15736
+
15737
+ .gsc-orderby-container .gsc-orderby-label {
15738
+ color: var(--text-muted, #5e5e6a);
15675
15739
  }
15676
15740
 
15677
15741
  /* Large Search Animation and Styling */
@@ -15695,7 +15759,7 @@ input[type="search"].search-textfield {
15695
15759
  width: 55px;
15696
15760
  transition: all 0.4s;
15697
15761
 
15698
- button {
15762
+ & button {
15699
15763
  transition: all 0.4s;
15700
15764
  font-size: 2.5rem;
15701
15765
  width: 60px;
@@ -15741,7 +15805,7 @@ input[type="search"].search-textfield {
15741
15805
  }
15742
15806
  }
15743
15807
 
15744
- button.gsc-search-button {
15808
+ & button.gsc-search-button {
15745
15809
  border-radius: 0 5px 5px 0;
15746
15810
  padding: 0 12px;
15747
15811
  border: 1px solid;
@@ -15786,14 +15850,14 @@ GOOGLE CUSTOM SEARCH CUSTOMIZATION OVERRIDES
15786
15850
  ----------------------------------------- */
15787
15851
 
15788
15852
  .gsc-control-searchbox-only {
15789
- form.gsc-search-box {
15853
+ & form.gsc-search-box {
15790
15854
  margin-bottom: 0;
15791
15855
  }
15792
15856
 
15793
- table.gsc-search-box {
15857
+ & table.gsc-search-box {
15794
15858
  margin-bottom: 0;
15795
15859
 
15796
- td.gsc-input {
15860
+ & td.gsc-input {
15797
15861
  padding-right: 0 !important;
15798
15862
  width: 100% !important;
15799
15863
  }
@@ -15805,7 +15869,7 @@ GOOGLE CUSTOM SEARCH CUSTOMIZATION OVERRIDES
15805
15869
  height: 100%;
15806
15870
  }
15807
15871
 
15808
- input.gsc-input {
15872
+ & input.gsc-input {
15809
15873
  background-color: rgb(255 255 255 / 100%);
15810
15874
  border-radius: 0;
15811
15875
  border: 3px solid transparent;
@@ -15818,8 +15882,8 @@ GOOGLE CUSTOM SEARCH CUSTOMIZATION OVERRIDES
15818
15882
  background-position-x: 7px !important;
15819
15883
  }
15820
15884
 
15821
- input.gsc-search-button,
15822
- button.gsc-search-button {
15885
+ & input.gsc-search-button,
15886
+ & button.gsc-search-button {
15823
15887
  opacity: 0;
15824
15888
  width: 55px;
15825
15889
  height: 51px;
@@ -15829,7 +15893,7 @@ GOOGLE CUSTOM SEARCH CUSTOMIZATION OVERRIDES
15829
15893
  z-index: 55;
15830
15894
  }
15831
15895
 
15832
- td.gsc-clear-button {
15896
+ & td.gsc-clear-button {
15833
15897
  width: 1px !important;
15834
15898
  margin-right: 0 !important;
15835
15899
  margin-left: 0 !important;
@@ -15838,7 +15902,7 @@ GOOGLE CUSTOM SEARCH CUSTOMIZATION OVERRIDES
15838
15902
  position: relative;
15839
15903
  }
15840
15904
 
15841
- td.gsc-search-button {
15905
+ & td.gsc-search-button {
15842
15906
  width: 0 !important;
15843
15907
  margin-right: 0 !important;
15844
15908
  margin-left: 0 !important;
@@ -15847,7 +15911,7 @@ GOOGLE CUSTOM SEARCH CUSTOMIZATION OVERRIDES
15847
15911
  position: relative;
15848
15912
  }
15849
15913
 
15850
- div.gsc-clear-button {
15914
+ & div.gsc-clear-button {
15851
15915
  padding-left: 0 !important;
15852
15916
  background-image: none !important;
15853
15917
  margin-left: 0;
@@ -15881,12 +15945,12 @@ GOOGLE CUSTOM SEARCH CUSTOMIZATION OVERRIDES
15881
15945
  .search-results-header .gsc-control-searchbox-only {
15882
15946
  margin-bottom: 20px;
15883
15947
 
15884
- td.gsc-clear-button {
15948
+ & td.gsc-clear-button {
15885
15949
  display: none;
15886
15950
  }
15887
15951
  }
15888
15952
 
15889
- table.gsc-search-box table td div {
15953
+ & table.gsc-search-box table td div {
15890
15954
  padding: 0 !important;
15891
15955
  }
15892
15956
 
@@ -15896,7 +15960,7 @@ table.gsc-search-box table td div {
15896
15960
  border: none !important;
15897
15961
  }
15898
15962
 
15899
- table.gsc-search-box td {
15963
+ & table.gsc-search-box td {
15900
15964
  padding: 0 !important;
15901
15965
  }
15902
15966
 
@@ -15924,23 +15988,23 @@ table.gsc-search-box td {
15924
15988
  }
15925
15989
 
15926
15990
  /* clears the ‘X’ from Internet Explorer */
15927
- input[type="search"]::-ms-clear {
15991
+ & input[type="search"]::-ms-clear {
15928
15992
  display: none;
15929
15993
  width: 0;
15930
15994
  height: 0;
15931
15995
  }
15932
15996
 
15933
- input[type="search"]::-ms-reveal {
15997
+ & input[type="search"]::-ms-reveal {
15934
15998
  display: none;
15935
15999
  width: 0;
15936
16000
  height: 0;
15937
16001
  }
15938
16002
 
15939
16003
  /* clears the ‘X’ from Chrome */
15940
- input[type="search"]::-webkit-search-decoration,
15941
- input[type="search"]::-webkit-search-cancel-button,
15942
- input[type="search"]::-webkit-search-results-button,
15943
- input[type="search"]::-webkit-search-results-decoration {
16004
+ & input[type="search"]::-webkit-search-decoration,
16005
+ & input[type="search"]::-webkit-search-cancel-button,
16006
+ & input[type="search"]::-webkit-search-results-button,
16007
+ & input[type="search"]::-webkit-search-results-decoration {
15944
16008
  display: none;
15945
16009
  }
15946
16010
  /* -----------------------------------------
@@ -16013,6 +16077,19 @@ input[type="search"]::-webkit-search-results-decoration {
16013
16077
  .compact + .search-results-container .search-results .search-results-header {
16014
16078
  padding-top: 50px;
16015
16079
  }
16080
+
16081
+ div.search-results-header {
16082
+ & form {
16083
+ .search-textfield {
16084
+ outline-offset: -4px;
16085
+ }
16086
+
16087
+ .gsc-search-button {
16088
+ display: block !important;
16089
+ outline-offset: -4px;
16090
+ }
16091
+ }
16092
+ }
16016
16093
  /* -----------------------------------------
16017
16094
  GOOGLE CSE RESULTS
16018
16095
  /src/css/cagov/search-google-cse.css
@@ -16039,36 +16116,55 @@ input[type="search"]::-webkit-search-results-decoration {
16039
16116
  }
16040
16117
 
16041
16118
  .gs-result {
16042
- a.gs-title,
16043
- a.gs-title b {
16044
- color: var(--color-p2, #046b99) !important;
16119
+ & a.gs-title,
16120
+ & a.gs-title b {
16121
+ color: var(--link-color, #046b99) !important;
16122
+
16123
+ &:hover,
16124
+ &:focus {
16125
+ color: var(--link-hover-color, #005a7f) !important;
16126
+ }
16045
16127
  }
16046
16128
 
16047
16129
  .gsc-url-top {
16048
16130
  .gs-visibleUrl-breadcrumb span {
16049
- color: var(--gray-600, #72717c) !important;
16131
+ color: var(--text-muted, #72717c) !important;
16050
16132
  }
16051
16133
  }
16052
16134
 
16053
16135
  .gs-snippet {
16054
- color: var(--gray-900, #3b3a48) !important;
16136
+ color: var(--text-color, #3b3a48) !important;
16055
16137
  }
16056
16138
  }
16057
16139
 
16058
16140
  .gsc-cursor-box {
16059
16141
  .gsc-cursor {
16060
16142
  .gsc-cursor-page {
16061
- color: var(--color-p3, #323a45) !important;
16143
+ color: var(--text-color, #3b3a48) !important;
16062
16144
  }
16063
16145
 
16064
16146
  .gsc-cursor-current-page {
16065
- color: var(--color-p3, #323a45) !important;
16147
+ color: var(--text-color, #3b3a48) !important;
16066
16148
  }
16067
16149
  }
16068
16150
  }
16069
16151
 
16070
16152
  .gcsc-find-more-on-google {
16071
- color: var(--color-p2, #046b99) !important;
16153
+ color: var(--link-color, #046b99) !important;
16154
+ }
16155
+
16156
+ .gcsc-find-more-on-google-magnifier {
16157
+ fill: var(--link-color, #046b99) !important;
16158
+ }
16159
+
16160
+ .gsc-results .gsc-cursor-box .gsc-cursor-page {
16161
+ background-color: var(--body-bg, #fff) !important;
16162
+ color: var(--link-color, #046b99) !important;
16163
+ }
16164
+
16165
+ .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
16166
+ color: var(--text-color, #3b3a48) !important;
16167
+ background-color: var(--body-bg, #fff) !important;
16072
16168
  }
16073
16169
  /* -----------------------------------------
16074
16170
  GLOBAL NAVIGATION - /src/css/cagov/navigation.css
@@ -16163,7 +16259,7 @@ input[type="search"]::-webkit-search-results-decoration {
16163
16259
  > a,
16164
16260
  .first-level-btn,
16165
16261
  .first-level-link {
16166
- color: var(--color-p2, #046b99);
16262
+ color: var(--main-nav-color, var(--color-p2, #046b99));
16167
16263
 
16168
16264
  > span[class^="ca-gov-icon"] {
16169
16265
  color: var(--gray-900, #3b3a48);
@@ -16175,7 +16271,7 @@ input[type="search"]::-webkit-search-results-decoration {
16175
16271
  > a,
16176
16272
  .first-level-btn,
16177
16273
  .first-level-link {
16178
- color: var(--color-p2, #046b99);
16274
+ color: var(--main-nav-color, var(--color-p2, #046b99));
16179
16275
 
16180
16276
  /* stylelint-disable-next-line no-descending-specificity */
16181
16277
  > span[class^="ca-gov-icon"] {
@@ -16238,11 +16334,11 @@ input[type="search"]::-webkit-search-results-decoration {
16238
16334
  position: relative;
16239
16335
  text-align: center;
16240
16336
  text-decoration: none;
16241
- color: var(--color-p2, #046b99);
16337
+ color: var(--main-nav-color, var(--color-p2, #046b99));
16242
16338
 
16243
16339
  &:hover,
16244
16340
  &:focus {
16245
- color: var(--gray-900, #3b3a48);
16341
+ color: var(--main-nav-color-hover, var(--gray-900, #3b3a48));
16246
16342
  }
16247
16343
 
16248
16344
  &:focus {
@@ -16286,18 +16382,21 @@ input[type="search"]::-webkit-search-results-decoration {
16286
16382
 
16287
16383
  &:hover,
16288
16384
  &:focus {
16289
- background-color: var(--gray-50, #fafafa);
16385
+ background-color: var(--main-nav-bg-hover, var(--gray-50, #fafafa));
16290
16386
  }
16291
16387
 
16292
16388
  &.active {
16293
- background-color: var(--gray-50, #fafafa);
16389
+ background-color: var(--main-nav-bg-active, var(--gray-50, #fafafa));
16294
16390
  position: relative;
16295
- color: var(--black, #000);
16391
+ color: var(--main-nav-color-active, var(--black, #000));
16296
16392
 
16297
16393
  &:hover,
16298
16394
  &:focus {
16299
- color: var(--gray-800, #4a4958);
16300
- background-color: var(--gray-100, #f3f3f4);
16395
+ color: var(--main-nav-color-active-hover, var(--gray-800, #4a4958));
16396
+ background-color: var(
16397
+ --main-nav-bg-active-hover,
16398
+ var(--gray-100, #f3f3f4)
16399
+ );
16301
16400
  }
16302
16401
 
16303
16402
  &::before {
@@ -16306,7 +16405,8 @@ input[type="search"]::-webkit-search-results-decoration {
16306
16405
  top: 0;
16307
16406
  left: 0;
16308
16407
  height: 100%;
16309
- border-left: 1px solid var(--gray-200, #d4d4d7);
16408
+ border-left: 1px solid
16409
+ var(--main-nav-border-color, var(--gray-200, #d4d4d7));
16310
16410
  }
16311
16411
 
16312
16412
  &::after {
@@ -16315,7 +16415,8 @@ input[type="search"]::-webkit-search-results-decoration {
16315
16415
  top: 0;
16316
16416
  right: 0;
16317
16417
  height: 100%;
16318
- border-left: 1px solid var(--gray-200, #d4d4d7);
16418
+ border-left: 1px solid
16419
+ var(--main-nav-border-color, var(--gray-200, #d4d4d7));
16319
16420
  }
16320
16421
  }
16321
16422
 
@@ -16347,14 +16448,17 @@ input[type="search"]::-webkit-search-results-decoration {
16347
16448
  &.active {
16348
16449
  .first-level-link,
16349
16450
  .first-level-btn {
16350
- background-color: var(--gray-50, #fafafa);
16451
+ background-color: var(--main-nav-bg-active, var(--gray-50, #fafafa));
16351
16452
  position: relative;
16352
- color: var(--black, #000);
16453
+ color: var(--main-nav-color-active, var(--black, #000));
16353
16454
 
16354
16455
  &:hover,
16355
16456
  &:focus {
16356
- color: var(--gray-800, #4a4958);
16357
- background-color: var(--gray-100, #f3f3f4);
16457
+ color: var(--main-nav-color-active-hover, var(--gray-800, #4a4958));
16458
+ background-color: var(
16459
+ --main-nav-bg-active-hover,
16460
+ var(--gray-100, #f3f3f4)
16461
+ );
16358
16462
  }
16359
16463
 
16360
16464
  &::before {
@@ -16363,7 +16467,8 @@ input[type="search"]::-webkit-search-results-decoration {
16363
16467
  top: 0;
16364
16468
  left: 0;
16365
16469
  height: 100%;
16366
- border-left: 1px solid var(--gray-200, #d4d4d7);
16470
+ border-left: 1px solid
16471
+ var(--main-nav-border-color, var(--gray-200, #d4d4d7));
16367
16472
  }
16368
16473
 
16369
16474
  &::after {
@@ -16372,7 +16477,8 @@ input[type="search"]::-webkit-search-results-decoration {
16372
16477
  top: 0;
16373
16478
  right: 0;
16374
16479
  height: 100%;
16375
- border-left: 1px solid var(--gray-200, #d4d4d7);
16480
+ border-left: 1px solid
16481
+ var(--main-nav-border-color, var(--gray-200, #d4d4d7));
16376
16482
  }
16377
16483
  }
16378
16484
  }
@@ -16408,9 +16514,9 @@ input[type="search"]::-webkit-search-results-decoration {
16408
16514
 
16409
16515
  .sub-nav {
16410
16516
  top: 100%;
16411
- border: solid 1px #ccc;
16517
+ border: solid 1px var(--main-nav-border-color, #ccc);
16412
16518
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
16413
- background: var(--white, #fff);
16519
+ background: var(--main-nav-bg, var(--white, #fff));
16414
16520
 
16415
16521
  .second-level-nav {
16416
16522
  > li {
@@ -16418,20 +16524,20 @@ input[type="search"]::-webkit-search-results-decoration {
16418
16524
 
16419
16525
  &:hover,
16420
16526
  &:focus {
16421
- background: #fff;
16527
+ background: var(--main-nav-bg-hover, #fff);
16422
16528
  }
16423
16529
  }
16424
16530
 
16425
16531
  .link-description {
16426
- color: var(--gray-700, #5e5e6a);
16532
+ color: var(--text-muted, var(--gray-700, #5e5e6a));
16427
16533
  }
16428
16534
  }
16429
16535
 
16430
16536
  .second-level-link {
16431
- color: var(--color-p2, #046b99);
16537
+ color: var(--main-nav-color, var(--color-p2, #046b99));
16432
16538
 
16433
16539
  [class^="ca-gov-icon-"] {
16434
- color: var(--gray-700, #5e5e6a);
16540
+ color: var(--text-muted, var(--gray-700, #5e5e6a));
16435
16541
  }
16436
16542
  }
16437
16543
  }
@@ -16628,7 +16734,7 @@ input[type="search"]::-webkit-search-results-decoration {
16628
16734
  }
16629
16735
 
16630
16736
  &:focus {
16631
- outline: 2px solid var(--outline-dark-mode-color);
16737
+ outline: 2px solid var(--outline-for-dark-bg);
16632
16738
  outline-offset: -4px;
16633
16739
  }
16634
16740
 
@@ -16684,7 +16790,7 @@ input[type="search"]::-webkit-search-results-decoration {
16684
16790
  background-color: var(--mobile-drawer, #214a68);
16685
16791
 
16686
16792
  &:focus {
16687
- outline: 2px solid var(--outline-dark-mode-color);
16793
+ outline: 2px solid var(--outline-for-dark-bg);
16688
16794
  outline-offset: -4px;
16689
16795
  }
16690
16796
 
@@ -16727,9 +16833,17 @@ input[type="search"]::-webkit-search-results-decoration {
16727
16833
  display: none;
16728
16834
  }
16729
16835
 
16730
- .nav-drawer + .search-container #Search .gsc-search-button {
16731
- &:focus {
16732
- outline: 2px solid var(--outline-default-color);
16836
+ .nav-drawer + .search-container #Search {
16837
+ .search-textfield {
16838
+ border-color: var(--white, #fff);
16839
+ }
16840
+
16841
+ .gsc-search-button {
16842
+ border-color: var(--white, #fff);
16843
+
16844
+ &:focus {
16845
+ outline: 2px solid var(--outline-for-light-bg, #0b8ee5);
16846
+ }
16733
16847
  }
16734
16848
  }
16735
16849
  }
@@ -16791,7 +16905,7 @@ input[type="search"]::-webkit-search-results-decoration {
16791
16905
 
16792
16906
  & a.second-level-link:hover,
16793
16907
  & a.second-level-link:focus {
16794
- background-color: var(--gray-50, #fafafa);
16908
+ background-color: var(--main-nav-bg-hover, var(--gray-50, #fafafa));
16795
16909
  text-decoration: none;
16796
16910
  }
16797
16911
  }
@@ -16814,8 +16928,8 @@ input[type="search"]::-webkit-search-results-decoration {
16814
16928
  position: relative;
16815
16929
  width: 0.55rem;
16816
16930
  height: 0.55rem;
16817
- border-top: 2px solid var(--color-p2, #046b99);
16818
- border-left: 2px solid var(--color-p2, #046b99);
16931
+ border-top: 2px solid var(--main-nav-color, #046b99);
16932
+ border-left: 2px solid var(--main-nav-color, #046b99);
16819
16933
  transform: rotate(225deg);
16820
16934
  vertical-align: middle;
16821
16935
  top: -2px;
@@ -17237,7 +17351,7 @@ a.second-level-link {
17237
17351
  font-size: 0.8em;
17238
17352
  }
17239
17353
 
17240
- a.second-level-link {
17354
+ & a.second-level-link {
17241
17355
  padding: 0 !important;
17242
17356
  }
17243
17357
 
@@ -17325,7 +17439,7 @@ a.second-level-link {
17325
17439
  text-align: center;
17326
17440
  padding: 0 40px;
17327
17441
 
17328
- a {
17442
+ & a {
17329
17443
  flex: 1;
17330
17444
  border: none;
17331
17445
  padding: 20px 15px 15px;
@@ -17335,7 +17449,7 @@ a.second-level-link {
17335
17449
  height: auto;
17336
17450
 
17337
17451
  &:hover {
17338
- background: #fff;
17452
+ background: var(--main-nav-bg-hover, #fff);
17339
17453
  }
17340
17454
  }
17341
17455
 
@@ -17343,17 +17457,25 @@ a.second-level-link {
17343
17457
  display: block;
17344
17458
  margin: 0;
17345
17459
  }
17460
+
17461
+ .image-icon {
17462
+ width: 6rem;
17463
+ }
17346
17464
  }
17347
17465
 
17348
17466
  .second-level-nav.flex.with-border a {
17349
- border-top: 2px dotted #ccc;
17350
- border-right: 2px dotted #ccc;
17351
- border-bottom: 2px dotted #ccc;
17467
+ border-top: 2px dotted var(--border-color-default, #ccc);
17468
+ border-right: 2px dotted var(--border-color-default, #ccc);
17469
+ border-bottom: 2px dotted var(--border-color-default, #ccc);
17352
17470
 
17353
- &:first-child {
17354
- border-left: 2px dotted #ccc;
17471
+ &:first-of-type {
17472
+ border-left: 2px dotted var(--border-color-default, #ccc);
17355
17473
  }
17356
17474
  }
17475
+
17476
+ /* .second-level-nav.flex.with-border a:first-of-type {
17477
+ border-left: 2px dotted var(--border-color-default, #ccc);
17478
+ } */
17357
17479
  }
17358
17480
 
17359
17481
  @media (width <= 991px) {
@@ -17362,9 +17484,9 @@ a.second-level-link {
17362
17484
  text-align: left;
17363
17485
  padding: 0;
17364
17486
 
17365
- a {
17487
+ & a {
17366
17488
  display: block;
17367
- border-bottom: 1px solid #ccc;
17489
+ border-bottom: 1px solid var(--border-color-default, #ccc);
17368
17490
  padding: 0;
17369
17491
  margin-top: 0;
17370
17492
  margin-bottom: 0;
@@ -17372,7 +17494,7 @@ a.second-level-link {
17372
17494
  height: auto;
17373
17495
 
17374
17496
  &:hover {
17375
- background: #fff;
17497
+ background: var(--main-nav-bg-hover, #fff);
17376
17498
  }
17377
17499
  }
17378
17500
 
@@ -17488,7 +17610,7 @@ header.nav-overlay {
17488
17610
  opacity: 1;
17489
17611
  transform: rotate(0deg);
17490
17612
  transition: 0.25s ease-in-out;
17491
- background-color: var(--color-p2, #046b99);
17613
+ background-color: var(--mobile-menu-icon-color, #046b99);
17492
17614
 
17493
17615
  &:nth-child(1) {
17494
17616
  top: 12px;
@@ -17535,11 +17657,11 @@ header.nav-overlay {
17535
17657
  height: 2.75rem;
17536
17658
 
17537
17659
  &:focus {
17538
- outline: 2px solid var(--outline-dark-mode-color);
17660
+ outline: 2px solid var(--outline-for-dark-bg);
17539
17661
  }
17540
17662
 
17541
17663
  /* stylelint-disable-next-line no-descending-specificity */
17542
- span {
17664
+ & span {
17543
17665
  background-color: var(--white, #fff);
17544
17666
  width: 30px;
17545
17667
 
@@ -17553,7 +17675,7 @@ header.nav-overlay {
17553
17675
  border: none;
17554
17676
 
17555
17677
  &[aria-expanded="false"] {
17556
- span {
17678
+ & span {
17557
17679
  &:nth-child(1) {
17558
17680
  top: 15px;
17559
17681
  }
@@ -17606,7 +17728,7 @@ header.nav-overlay {
17606
17728
  display: flex;
17607
17729
  flex-direction: column;
17608
17730
 
17609
- span.ca-gov-icon-search {
17731
+ & span.ca-gov-icon-search {
17610
17732
  position: relative;
17611
17733
  font-size: 1.4rem;
17612
17734
  display: block;
@@ -17618,13 +17740,13 @@ header.nav-overlay {
17618
17740
  }
17619
17741
  }
17620
17742
 
17621
- a {
17743
+ & a {
17622
17744
  color: var(--gray-600, #72717c);
17623
17745
  text-decoration: none;
17624
17746
  }
17625
17747
 
17626
17748
  &.toggle-sub-nav {
17627
- color: var(--color-p2, #046b99);
17749
+ color: var(--mobile-menu-icon-color, #046b99);
17628
17750
  background-color: color-mix(in srgb, var(--color-s1), #000 6%);
17629
17751
 
17630
17752
  &:hover,
@@ -17659,7 +17781,7 @@ header.nav-overlay {
17659
17781
  .navigation-search .settings-links {
17660
17782
  padding: 1rem;
17661
17783
 
17662
- a {
17784
+ & a {
17663
17785
  position: relative;
17664
17786
  color: var(--white, #fff);
17665
17787
  margin-left: 1rem;
@@ -17671,7 +17793,7 @@ header.nav-overlay {
17671
17793
  }
17672
17794
  }
17673
17795
 
17674
- a::before {
17796
+ & a::before {
17675
17797
  content: "";
17676
17798
  color: var(--white, #fff);
17677
17799
  border: none;
@@ -17685,7 +17807,7 @@ header.nav-overlay {
17685
17807
  left: -1.95rem;
17686
17808
  }
17687
17809
 
17688
- a:first-child::before {
17810
+ & a:first-child::before {
17689
17811
  display: none;
17690
17812
  }
17691
17813
  }
@@ -17758,8 +17880,8 @@ header.nav-overlay {
17758
17880
  width: 100%;
17759
17881
  min-height: 42px;
17760
17882
  transition: all 0.3s ease;
17761
- background: var(--color-s1, #eef8fb);
17762
- color: var(--black, #000);
17883
+ background: var(--utility-header-background, var(--color-s1, #eef8fb));
17884
+ color: var(--text-color, #000);
17763
17885
 
17764
17886
  .half {
17765
17887
  padding-top: 0;
@@ -17796,13 +17918,13 @@ header.nav-overlay {
17796
17918
  display: inline-block;
17797
17919
  padding: 0;
17798
17920
  text-decoration: underline;
17799
- color: var(--black, #000);
17921
+ color: var(--utility-link, #000);
17800
17922
 
17801
17923
  &:hover,
17802
17924
  &:focus,
17803
17925
  &.hovered {
17804
17926
  text-decoration: none;
17805
- color: var(--gray-800, #4a4958);
17927
+ color: var(--utility-link-hover, #4a4958);
17806
17928
  }
17807
17929
  }
17808
17930
 
@@ -17843,7 +17965,7 @@ header.nav-overlay {
17843
17965
 
17844
17966
  &:hover,
17845
17967
  &:focus {
17846
- color: var(--gray-800, #4a4958);
17968
+ color: var(--utility-link-hover, #4a4958);
17847
17969
  background-color: transparent;
17848
17970
  border: none;
17849
17971
  }
@@ -17878,7 +18000,7 @@ header.nav-overlay {
17878
18000
  vertical-align: initial;
17879
18001
  line-height: 120%;
17880
18002
  background: white;
17881
- color: var(--black, #000);
18003
+ color: var(--text-color, #000);
17882
18004
  }
17883
18005
 
17884
18006
  .flex-row {
@@ -17906,12 +18028,12 @@ header.nav-overlay {
17906
18028
  margin: 0;
17907
18029
  padding-right: 0;
17908
18030
  font-size: 0.95rem;
17909
- color: var(--black, #000);
18031
+ color: var(--utility-link, #000);
17910
18032
 
17911
18033
  &:hover,
17912
18034
  &:focus {
17913
18035
  text-decoration: none;
17914
- color: var(--gray-800, #4a4958);
18036
+ color: var(--utility-link-hover, #4a4958);
17915
18037
  }
17916
18038
  }
17917
18039
  }
@@ -17926,12 +18048,12 @@ header.nav-overlay {
17926
18048
  /* stylelint-disable-next-line no-descending-specificity */
17927
18049
  & a {
17928
18050
  margin: 0 10px;
17929
- color: var(--black, #000);
18051
+ color: var(--link-color, #000);
17930
18052
  text-decoration: none;
17931
18053
 
17932
18054
  &:hover,
17933
18055
  &:focus {
17934
- color: var(--gray-800, #4a4958);
18056
+ color: var(--link-color-hover, #4a4958);
17935
18057
  }
17936
18058
  }
17937
18059
 
@@ -17961,6 +18083,7 @@ header.nav-overlay {
17961
18083
  .official-tag {
17962
18084
  margin: 0 1rem 0 0;
17963
18085
  font-size: 0.95rem;
18086
+ color: var(--text-color, #3b3a48);
17964
18087
 
17965
18088
  @media (width <= 767px) {
17966
18089
  margin-right: 0;
@@ -17997,7 +18120,7 @@ header.nav-overlay {
17997
18120
  .section {
17998
18121
  padding-top: 25px;
17999
18122
  padding-bottom: 25px;
18000
- background: var(--white, #fff);
18123
+ background: var(--body-bg, #fff);
18001
18124
  position: relative;
18002
18125
  overflow: hidden;
18003
18126
 
@@ -18023,7 +18146,12 @@ header.nav-overlay {
18023
18146
  }
18024
18147
 
18025
18148
  .section-default {
18026
- background: var(--gray-50, #fafafa);
18149
+ background: var(--default-bg, var(--gray-50, #fafafa));
18150
+ }
18151
+
18152
+ .section-default-hover:hover,
18153
+ .section-default-hover:focus {
18154
+ background: var(--default-bg-hover, var(--gray-75, #f2f2f2));
18027
18155
  }
18028
18156
 
18029
18157
  .section-understated {
@@ -18391,18 +18519,18 @@ header.nav-overlay {
18391
18519
  }
18392
18520
 
18393
18521
  /* stylelint-disable-next-line no-descending-specificity */
18394
- a:not(.btn) {
18395
- color: var(--white, #fff);
18522
+ & a:not(.btn) {
18523
+ color: var(--dark-section-link-color, var(--white, #fff));
18396
18524
  text-decoration: underline;
18397
18525
 
18398
18526
  &:hover,
18399
18527
  &:focus {
18400
- color: var(--color-s1, #eef8fb);
18528
+ color: var(--dark-section-link-color-hover, var(--color-s1, #eef8fb));
18401
18529
  text-decoration: underline;
18402
18530
  }
18403
18531
 
18404
18532
  &:focus {
18405
- outline: 2px solid var(--outline-dark-mode-color);
18533
+ outline: 2px solid var(--outline-for-dark-bg);
18406
18534
  outline-offset: -2px;
18407
18535
  }
18408
18536
  }
@@ -19626,7 +19754,7 @@ html {
19626
19754
  }
19627
19755
 
19628
19756
  .tab-content {
19629
- border: 1px solid var(--gray-200, #d4d4d7);
19757
+ border: 1px solid var(--border-color-default, #d4d4d7);
19630
19758
 
19631
19759
  @media (width <= 767px) {
19632
19760
  border: none;
@@ -19694,11 +19822,11 @@ html {
19694
19822
  background-color: transparent !important;
19695
19823
  border: none !important;
19696
19824
  cursor: default;
19697
- color: var(--gray-900, #3b3a48) !important;
19825
+ color: var(--text-color, #3b3a48) !important;
19698
19826
  position: relative;
19699
19827
 
19700
19828
  &:hover {
19701
- color: var(--gray-700, #5e5e6a) !important;
19829
+ color: var(--text-muted, #5e5e6a) !important;
19702
19830
  }
19703
19831
 
19704
19832
  &::after {
@@ -19811,13 +19939,13 @@ html {
19811
19939
  padding: 0.5rem 1rem;
19812
19940
  font-size: 1.25rem;
19813
19941
  font-weight: 600;
19814
- background-color: var(--gray-50, #fafafa);
19942
+ background-color: var(--default-bg, #fafafa);
19815
19943
  text-decoration: none;
19816
19944
  position: relative;
19817
19945
 
19818
19946
  &:hover,
19819
19947
  &:focus {
19820
- background-color: var(--gray-100, #f3f3f4);
19948
+ background-color: var(--default-bg-darker, #f3f3f4);
19821
19949
  }
19822
19950
 
19823
19951
  &:focus {
@@ -19830,8 +19958,8 @@ html {
19830
19958
  position: absolute;
19831
19959
  top: 1.125rem;
19832
19960
  right: 1rem;
19833
- border-right: 2px solid black;
19834
- border-top: 2px solid black;
19961
+ border-right: 2px solid var(--base-dark, #000);
19962
+ border-top: 2px solid var(--base-dark, #000);
19835
19963
  border-radius: 3px;
19836
19964
  width: 10px;
19837
19965
  height: 10px;
@@ -19840,11 +19968,11 @@ html {
19840
19968
  }
19841
19969
 
19842
19970
  &[aria-expanded="true"] {
19843
- color: var(--black, #000);
19971
+ color: var(--base-dark, #000);
19844
19972
 
19845
19973
  &:hover,
19846
19974
  &:focus {
19847
- color: var(--gray-800, #4a4958);
19975
+ color: var(--text-secondary, var(--gray-800, #4a4958));
19848
19976
  }
19849
19977
 
19850
19978
  &::before {
@@ -19899,7 +20027,7 @@ html {
19899
20027
  border: none;
19900
20028
  position: relative;
19901
20029
  margin: 0;
19902
- color: var(--black, #000);
20030
+ color: var(--base-dark, var(--black, #000));
19903
20031
 
19904
20032
  &::after {
19905
20033
  left: 0;
@@ -19913,12 +20041,12 @@ html {
19913
20041
  }
19914
20042
 
19915
20043
  [role="tabpanel"] {
19916
- border: 1px solid var(--gray-200, #d4d4d7);
20044
+ border: 1px solid var(--border-color-default, #d4d4d7);
19917
20045
  padding: 1.1rem;
19918
20046
  margin-top: -2px;
19919
20047
 
19920
20048
  /* stylelint-disable-next-line no-descending-specificity */
19921
- a:focus {
20049
+ & a:focus {
19922
20050
  outline: 2px solid var(--outline-default-color);
19923
20051
  }
19924
20052
 
@@ -19953,23 +20081,24 @@ cagov-accordion > details {
19953
20081
  > summary {
19954
20082
  cursor: pointer;
19955
20083
  padding: 0.5rem 3rem 0.5rem 3.75rem;
19956
- background-color: var(--gray-50, #fafafa);
20084
+ background-color: var(--default-bg, var(--gray-50, #fafafa));
19957
20085
  position: relative;
19958
20086
  line-height: 2rem;
19959
20087
  margin: 0;
19960
- color: var(--gray-800, #4a4958);
20088
+ color: var(--text-color, var(--gray-900, #3b3a48));
19961
20089
  font-size: 1.125rem;
19962
20090
  font-weight: bold;
19963
- border: 1px solid var(--gray-200, #d4d4d7);
20091
+ border: 1px solid var(--border-color-default, var(--gray-200, #d4d4d7));
19964
20092
 
19965
20093
  &::before {
19966
20094
  position: absolute;
19967
20095
  height: 100%;
19968
20096
  width: 2.75rem;
19969
- border-right: 1px solid var(--gray-200, #d4d4d7);
20097
+ border-right: 1px solid
20098
+ var(--border-color-default, var(--gray-200, #d4d4d7));
19970
20099
  top: 0;
19971
20100
  left: 0;
19972
- background-color: var(--gray-50, #fafafa);
20101
+ background-color: var(--default-bg, var(--gray-50, #fafafa));
19973
20102
  border-radius: 3px 0 0 3px;
19974
20103
  content: "";
19975
20104
  }
@@ -19993,19 +20122,31 @@ cagov-accordion > details {
19993
20122
  height: 0;
19994
20123
 
19995
20124
  &::before {
19996
- font-family: CaGov;
19997
- content: "5";
20125
+ content: "";
20126
+ display: inline-block;
20127
+ text-decoration: none;
19998
20128
  position: absolute;
19999
- font-size: 1.6rem;
20000
- transition: transform 0.2s;
20129
+ width: 0.5rem;
20130
+ height: 0.5rem;
20131
+ border-top: 2px solid var(--text-color, var(--gray-900, #3b3a48));
20132
+ border-left: 2px solid var(--text-color, var(--gray-900, #3b3a48));
20133
+ left: 0.55rem;
20134
+ top: 1rem;
20135
+ vertical-align: middle;
20136
+ transform-origin: center;
20137
+ transform: translateY(-50%) rotate(135deg);
20138
+ transition: transform 300ms ease-in-out;
20001
20139
  }
20002
20140
  }
20003
20141
 
20004
20142
  &:hover {
20005
- color: black;
20143
+ color: var(--text-color-hover, black);
20006
20144
 
20007
20145
  &::before {
20008
- background-color: var(--gray-100, #f3f3f4);
20146
+ background-color: var(
20147
+ --default-bg-hover-darker,
20148
+ var(--gray-100, #f3f3f4)
20149
+ );
20009
20150
  }
20010
20151
  }
20011
20152
  }
@@ -20035,7 +20176,10 @@ cagov-accordion:defined {
20035
20176
 
20036
20177
  &:focus {
20037
20178
  &::before {
20038
- background-color: var(--gray-100, #f3f3f4);
20179
+ background-color: var(
20180
+ --default-bg-hover-darker,
20181
+ var(--gray-100, #f3f3f4)
20182
+ );
20039
20183
  }
20040
20184
 
20041
20185
  &::after {
@@ -20050,7 +20194,7 @@ cagov-accordion:defined {
20050
20194
 
20051
20195
  .cagov-open-indicator {
20052
20196
  &::before {
20053
- transform: rotate(90deg) translateY(-0.2rem);
20197
+ transform: translate(0.125rem, -50%) rotate(225deg);
20054
20198
  }
20055
20199
  }
20056
20200
 
@@ -20059,7 +20203,10 @@ cagov-accordion:defined {
20059
20203
 
20060
20204
  &::before {
20061
20205
  border-radius: 3px 0 0;
20062
- background-color: var(--gray-100, #f3f3f4);
20206
+ background-color: var(
20207
+ --default-bg-hover-darker,
20208
+ var(--gray-100, #f3f3f4)
20209
+ );
20063
20210
  }
20064
20211
 
20065
20212
  &:focus {
@@ -20133,14 +20280,14 @@ cagov-accordion:defined {
20133
20280
  z-index: 2;
20134
20281
 
20135
20282
  &:hover {
20136
- color: var(--link-hover-color, #005a7f);
20283
+ color: var(--link-color-hover, #005a7f);
20137
20284
  }
20138
20285
  }
20139
20286
 
20140
20287
  .accordion__trigger::before {
20141
20288
  border-left: 0.3em solid transparent;
20142
20289
  border-right: 0.3em solid transparent;
20143
- border-top: 0.3em solid #222;
20290
+ border-top: 0.3em solid var(--text-color, #3b3a48);
20144
20291
  bottom: 0;
20145
20292
  content: "";
20146
20293
  height: 0;
@@ -20216,15 +20363,15 @@ cagov-accordion:defined {
20216
20363
  &:focus {
20217
20364
  outline: 2px solid var(--outline-default-color);
20218
20365
  outline-offset: -2px;
20219
- background-color: var(--gray-50, #fafafa);
20366
+ background-color: var(--default-bg, (--gray-50, #fafafa));
20220
20367
  }
20221
20368
 
20222
20369
  &:hover {
20223
- background-color: var(--gray-50, #fafafa);
20370
+ background-color: var(--default-bg, (--gray-50, #fafafa));
20224
20371
  }
20225
20372
 
20226
20373
  &.open {
20227
- background-color: var(--gray-50, #fafafa);
20374
+ background-color: var(--default-bg, (--gray-50, #fafafa));
20228
20375
 
20229
20376
  .rotate {
20230
20377
  transform: rotate(90deg) !important;
@@ -20269,11 +20416,11 @@ cagov-accordion:defined {
20269
20416
  padding: 0.75rem 1.25rem !important;
20270
20417
  text-decoration: none;
20271
20418
  font-weight: 500;
20272
- color: var(--gray-800, #4a4958);
20419
+ color: var(--text-color, var(--gray-800, #4a4958));
20273
20420
 
20274
20421
  &:hover,
20275
20422
  &:focus {
20276
- background-color: #f8f9fa;
20423
+ background-color: var(--sidenav-hover-bg, var(--gray-50, #fafafa));
20277
20424
  }
20278
20425
 
20279
20426
  &::before {
@@ -20295,12 +20442,15 @@ cagov-accordion:defined {
20295
20442
 
20296
20443
  &.active {
20297
20444
  .accordion__trigger {
20298
- color: var(--white, #fff) !important;
20299
- background-color: var(--color-p2, #046b99);
20445
+ color: var(--base-light, var(--white, #fff)) !important;
20446
+ background-color: var(--link-color, var(--color-p2, #046b99));
20300
20447
 
20301
20448
  &:hover,
20302
20449
  &:focus {
20303
- background-color: var(--color-p2-darker, #214a68) !important;
20450
+ background-color: var(
20451
+ --link-color-hover,
20452
+ var(--color-p2-darker, #214a68)
20453
+ ) !important;
20304
20454
  }
20305
20455
  }
20306
20456
  }
@@ -20311,16 +20461,23 @@ cagov-accordion:defined {
20311
20461
  .accordion {
20312
20462
  .accordion__heading {
20313
20463
  .accordion__trigger {
20314
- color: var(--gray-800, #4a4958);
20464
+ color: var(--text-color, var(--gray-800, #4a4958));
20315
20465
  }
20316
20466
 
20317
20467
  &.active {
20318
20468
  .accordion__trigger {
20319
- background-color: var(--color-p2, #046b99) !important;
20469
+ color: var(--base-light, var(--white, #fff)) !important;
20470
+ background-color: var(
20471
+ --link-color,
20472
+ var(--color-p2, #046b99)
20473
+ ) !important;
20320
20474
 
20321
20475
  &:hover,
20322
20476
  &:focus {
20323
- background-color: var(--color-p2-darker, #214a68) !important;
20477
+ background-color: var(
20478
+ --link-color-hover,
20479
+ var(--color-p2-darker, #214a68)
20480
+ ) !important;
20324
20481
  }
20325
20482
  }
20326
20483
  }
@@ -20333,13 +20490,19 @@ cagov-accordion:defined {
20333
20490
  .accordion__heading {
20334
20491
  &.active {
20335
20492
  .accordion__trigger {
20336
- color: var(--gray-800, #4a4958) !important;
20337
- background-color: var(--gray-50, #fafafa) !important;
20493
+ color: var(--text-color, var(--gray-800, #4a4958)) !important;
20494
+ background-color: var(
20495
+ --default-bg,
20496
+ var(--gray-50, #fafafa)
20497
+ ) !important;
20338
20498
 
20339
20499
  &:hover,
20340
20500
  &:focus {
20341
- color: var(--black, #000) !important;
20342
- background-color: var(--gray-100, #f3f3f4) !important;
20501
+ color: var(--text-color-hover, var(--black, #000)) !important;
20502
+ background-color: var(
20503
+ --default-bg-hover,
20504
+ var(--gray-100, #f3f3f4)
20505
+ ) !important;
20343
20506
  }
20344
20507
  }
20345
20508
  }
@@ -20351,14 +20514,22 @@ cagov-accordion:defined {
20351
20514
  .accordion {
20352
20515
  .accordion__heading {
20353
20516
  &.active {
20517
+ border: 1px solid var(--base-dark, var(--black, #000)) !important;
20518
+
20354
20519
  .accordion__trigger {
20355
- color: var(--gray-800, #4a4958) !important;
20356
- background-color: var(--gray-50, #fafafa) !important;
20520
+ color: var(--base-dark, var(--gray-800, #4a4958)) !important;
20521
+ background-color: var(
20522
+ --sidenav-active-bg,
20523
+ var(--gray-75, #f2f2f2)
20524
+ ) !important;
20357
20525
 
20358
20526
  &:hover,
20359
20527
  &:focus {
20360
- color: var(--black, #000) !important;
20361
- background-color: var(--gray-100, #f3f3f4) !important;
20528
+ color: var(--text-color-hover, var(--black, #000)) !important;
20529
+ background-color: var(
20530
+ --sidenav-active-hover-bg,
20531
+ var(--gray-100, #f3f3f4)
20532
+ ) !important;
20362
20533
  }
20363
20534
  }
20364
20535
  }
@@ -20383,14 +20554,15 @@ cagov-accordion:defined {
20383
20554
  padding-bottom: 0.7rem;
20384
20555
  padding-left: 2.5rem;
20385
20556
  text-decoration: none !important;
20386
- border-bottom: 1px solid var(--gray-100, #f3f3f4);
20387
- color: var(--gray-800, #4a4958);
20557
+ border-bottom: 1px solid
20558
+ var(--border-color-muted, var(--gray-100, #f3f3f4));
20559
+ color: var(--text-color, var(--gray-800, #4a4958));
20388
20560
 
20389
20561
  &:hover,
20390
20562
  &:focus {
20391
20563
  text-decoration: none;
20392
- background-color: var(--gray-50, #fafafa);
20393
- color: var(--black, #000);
20564
+ background-color: var(--sidenav-hover-bg, var(--gray-50, #fafafa));
20565
+ color: var(--text-color-hover, var(--black, #000));
20394
20566
  }
20395
20567
 
20396
20568
  &:focus {
@@ -20399,9 +20571,9 @@ cagov-accordion:defined {
20399
20571
  }
20400
20572
 
20401
20573
  &.active {
20402
- color: var(--gray-700, #5e5e6a);
20574
+ color: var(--sidenav-active-color, var(--gray-700, #5e5e6a));
20403
20575
  text-decoration: none;
20404
- background-color: var(--gray-75, #f3f3f4);
20576
+ background-color: var(--sidenav-active-bg, var(--gray-75, #f2f2f2));
20405
20577
 
20406
20578
  &::before {
20407
20579
  content: "";
@@ -20417,9 +20589,12 @@ cagov-accordion:defined {
20417
20589
 
20418
20590
  &:hover,
20419
20591
  &:focus {
20420
- color: var(--black, #000);
20592
+ color: var(--text-color-hover, var(--black, #000));
20421
20593
  text-decoration: none;
20422
- background-color: var(--gray-100, #f3f3f4);
20594
+ background-color: var(
20595
+ --default-bg-hover-darker,
20596
+ var(--gray-100, #ededef)
20597
+ );
20423
20598
  }
20424
20599
  }
20425
20600
  }
@@ -20434,13 +20609,14 @@ cagov-accordion.sidenav {
20434
20609
 
20435
20610
  > summary {
20436
20611
  border: none;
20437
- background: var(--white, #fff);
20612
+ background: var(--body-bg, var(--white, #fff));
20438
20613
  padding: 0.7rem 2rem 0.7rem 1rem;
20439
20614
  font-size: calc(1rem + var(--ratio));
20440
20615
  font-weight: 400;
20441
20616
  text-decoration: none;
20442
- border-bottom: 1px solid var(--gray-100, #f3f3f4);
20443
- color: var(--gray-700, #5e5e6a);
20617
+ border-bottom: 1px solid
20618
+ var(--border-color-muted, var(--gray-100, #f3f3f4));
20619
+ color: var(--text-muted, var(--gray-700, #5e5e6a));
20444
20620
 
20445
20621
  &::before {
20446
20622
  border: none !important;
@@ -20455,8 +20631,8 @@ cagov-accordion.sidenav {
20455
20631
  &:hover,
20456
20632
  &:focus {
20457
20633
  text-decoration: none;
20458
- background-color: var(--gray-50, #fafafa);
20459
- color: var(--gray-700, #5e5e6a);
20634
+ background-color: var(--sidenav-hover-bg, var(--gray-50, #fafafa));
20635
+ color: var(--text-color-hover, var(--black, #000));
20460
20636
 
20461
20637
  &::before {
20462
20638
  border: none;
@@ -20470,9 +20646,9 @@ cagov-accordion.sidenav {
20470
20646
  }
20471
20647
 
20472
20648
  &.active {
20473
- color: var(--gray-700, #5e5e6a) !important;
20649
+ color: var(--sidenav-active-color, var(--gray-700, #5e5e6a)) !important;
20474
20650
  text-decoration: none;
20475
- background-color: var(--gray-75, #f3f3f4);
20651
+ background-color: var(--sidenav-active-bg, var(--gray-75, #f2f2f2));
20476
20652
  font-weight: 400;
20477
20653
 
20478
20654
  &::before {
@@ -20484,9 +20660,12 @@ cagov-accordion.sidenav {
20484
20660
 
20485
20661
  &:hover,
20486
20662
  &:focus {
20487
- color: var(--black, #000) !important;
20663
+ color: var(--text-color-hover, var(--black, #000)) !important;
20488
20664
  text-decoration: none;
20489
- background-color: var(--gray-100, #f3f3f4);
20665
+ background-color: var(
20666
+ --sidenav-active-hover-bg,
20667
+ var(--gray-100, #ededef)
20668
+ );
20490
20669
  }
20491
20670
 
20492
20671
  &:focus {
@@ -20497,7 +20676,7 @@ cagov-accordion.sidenav {
20497
20676
 
20498
20677
  &[open] {
20499
20678
  > summary {
20500
- color: var(--black, #000);
20679
+ color: var(--text-color-hover, var(--black, #000));
20501
20680
 
20502
20681
  &::after {
20503
20682
  display: none;
@@ -20680,12 +20859,12 @@ hr.hr-light {
20680
20859
  ----------------------------------------- */
20681
20860
 
20682
20861
  figure {
20683
- border: 1px solid #ddd;
20862
+ border: 1px solid var(--border-color-default, #d4d4d7);
20684
20863
  margin-bottom: 15px;
20685
- background-color: var(--white, #fff);
20686
- border-color: var(--gray-200, #d4d4d7);
20864
+ background-color: var(--base-light, var(--white, #fff));
20865
+ border-color: var(--border-color-default, var(--gray-200, #d4d4d7));
20687
20866
 
20688
- img {
20867
+ & > img {
20689
20868
  width: 100%;
20690
20869
  }
20691
20870
  }
@@ -20719,8 +20898,8 @@ figcaption {
20719
20898
  .media-top {
20720
20899
  text-align: center;
20721
20900
 
20722
- img,
20723
- span {
20901
+ & > img,
20902
+ & > span {
20724
20903
  display: inherit;
20725
20904
  margin-bottom: var(--line-height-computed);
20726
20905
  }
@@ -20750,6 +20929,19 @@ figcaption {
20750
20929
  div.modal-header > button.close {
20751
20930
  margin-left: auto;
20752
20931
  }
20932
+
20933
+ .modal-body,
20934
+ .modal-title {
20935
+ color: var(--text-color);
20936
+ }
20937
+
20938
+ .modal-header {
20939
+ border-bottom: 1px solid var(--border-color-default);
20940
+ }
20941
+
20942
+ .modal-footer {
20943
+ border-top: 1px solid var(--border-color-default);
20944
+ }
20753
20945
  /* -----------------------------------------
20754
20946
  YouTube Video Player
20755
20947
  /src/css/cagov/youtube.css
@@ -20776,6 +20968,35 @@ div.modal-header > button.close {
20776
20968
  FORMS - /src/css/cagov/forms.css
20777
20969
  ----------------------------------------- */
20778
20970
 
20971
+ input[type="search"],
20972
+ input[type="search"].form-control,
20973
+ input[type="text"],
20974
+ input[type="text"].form-control,
20975
+ input[type="number"],
20976
+ input[type="number"].form-control,
20977
+ input[type="email"],
20978
+ input[type="email"].form-control,
20979
+ input[type="password"],
20980
+ input[type="password"].form-control,
20981
+ textarea,
20982
+ textarea.form-control,
20983
+ textarea.form-control:focus {
20984
+ background-color: var(--body-bg, #fff);
20985
+ color: var(--text-color, var(--gray-900, #3b3a48));
20986
+ }
20987
+
20988
+ /* placeholder styling */
20989
+ input::placeholder,
20990
+ input.form-control::placeholder,
20991
+ textarea::placeholder {
20992
+ color: var(--text-color, var(--gray-900, #3b3a48));
20993
+ opacity: 0.8;
20994
+ }
20995
+
20996
+ input[type="file"] {
20997
+ color: var(--text-color, var(--gray-900, #3b3a48));
20998
+ }
20999
+
20779
21000
  .form-control,
20780
21001
  .custom-file-label,
20781
21002
  .custom-select {
@@ -20850,7 +21071,7 @@ label {
20850
21071
  min-width: 38px;
20851
21072
  background-color: transparent;
20852
21073
  border: 1px solid;
20853
- border-color: #ccc;
21074
+ border-color: var(--border-color-default, #d4d4d7);
20854
21075
  transition: border-color 0.15s ease-in-out 0s;
20855
21076
  -moz-box-align: center;
20856
21077
  align-items: center;
@@ -20858,7 +21079,7 @@ label {
20858
21079
  vertical-align: middle;
20859
21080
  white-space: nowrap;
20860
21081
 
20861
- i {
21082
+ & i {
20862
21083
  margin: 0 auto;
20863
21084
  }
20864
21085
 
@@ -20936,10 +21157,10 @@ label {
20936
21157
  font-size: 12px;
20937
21158
  border: 1px solid;
20938
21159
  border-radius: 50%;
20939
- color: var(--color-p2, #046b99);
20940
- border-color: var(--color-p2, #046b99);
21160
+ color: var(--link-color, var(--color-p2, #046b99));
21161
+ border-color: var(--link-color, var(--color-p2, #046b99));
20941
21162
 
20942
- i {
21163
+ & i {
20943
21164
  border-radius: 50%;
20944
21165
  height: 10px;
20945
21166
  width: 10px;
@@ -20968,11 +21189,11 @@ label {
20968
21189
  width: 18px;
20969
21190
  height: 18px;
20970
21191
  font-size: 12px;
20971
- color: var(--white, #fff);
21192
+ color: var(--base-light, var(--white, #fff));
20972
21193
  border: 1px solid;
20973
- border-color: var(--color-p2, #046b99);
21194
+ border-color: var(--link-color, var(--color-p2, #046b99));
20974
21195
 
20975
- i {
21196
+ & i {
20976
21197
  display: block;
20977
21198
  height: 100%;
20978
21199
  left: 50%;
@@ -20996,13 +21217,13 @@ input[type="radio"]:checked + i,
20996
21217
  input[type="checkbox"]:checked + * i,
20997
21218
  input[type="radio"]:checked + * i {
20998
21219
  color: #fff;
20999
- background-color: var(--color-p2, #046b99);
21000
- border-color: var(--color-p2, #046b99);
21220
+ background-color: var(--link-color, var(--color-p2, #046b99));
21221
+ border-color: var(--link-color, var(--color-p2, #046b99));
21001
21222
  }
21002
21223
 
21003
21224
  .bg-primary--checked.checked,
21004
21225
  .checked .bg-primary--checked {
21005
- background-color: var(--color-p2, #046b99) !important;
21226
+ background-color: var(--link-color, var(--color-p2, #046b99)) !important;
21006
21227
  }
21007
21228
 
21008
21229
  /* primary Color */
@@ -21010,7 +21231,7 @@ input[type="checkbox"]:checked + .bg-primary--checked,
21010
21231
  input[type="radio"]:checked + .bg-primary--checked,
21011
21232
  input[type="checkbox"]:checked + * .bg-primary--checked,
21012
21233
  input[type="radio"]:checked + * .bg-primary--checked {
21013
- background-color: var(--color-p2, #046b99);
21234
+ background-color: var(--link-color, var(--color-p2, #046b99));
21014
21235
  }
21015
21236
 
21016
21237
  /* highlight Color */
@@ -21033,26 +21254,42 @@ input[type="radio"]:focus + div {
21033
21254
  }
21034
21255
 
21035
21256
  .custom-control-input:checked ~ .custom-control-label::before {
21036
- background-color: var(--color-p2, #046b99);
21257
+ background-color: var(--link-color, var(--color-p2, #046b99));
21037
21258
  border-radius: var(--border-radius-base);
21038
21259
  }
21039
21260
  }
21040
21261
 
21041
21262
  .custom-radio {
21042
21263
  .custom-control-input:checked ~ .custom-control-label::before {
21043
- background-color: var(--color-p2, #046b99);
21264
+ background-color: var(--link-color, var(--color-p2, #046b99));
21044
21265
  }
21045
21266
  }
21046
21267
 
21268
+ .form-check-input:focus {
21269
+ outline: 2px solid var(--outline-default-color);
21270
+ box-shadow: none;
21271
+ outline-offset: 2px;
21272
+ }
21273
+
21047
21274
  .form-check-input:checked,
21048
21275
  .custom-control-input:checked {
21049
- background-color: var(--color-p2, #046b99);
21050
- border-color: var(--color-p2, #046b99);
21276
+ background-color: var(--link-color, var(--color-p2, #046b99));
21277
+ border-color: var(--link-color, var(--color-p2, #046b99));
21051
21278
  }
21052
21279
 
21053
21280
  .form-select {
21054
- background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path d='M17.087 10.35l-4.337 4.336-4.337-4.336c-0.293-0.293-0.768-0.293-1.060 0s-0.293 0.768 0 1.060l4.864 4.864c0.147 0.147 0.341 0.221 0.533 0.219 0.194 0 0.386-0.072 0.533-0.219l4.865-4.864c0.293-0.293 0.293-0.768 0-1.060s-0.768-0.293-1.061 0z'/></svg>");
21281
+ background-image: var(
21282
+ --cagov-form-select-bg-image,
21283
+ url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path d='M17.087 10.35l-4.337 4.336-4.337-4.336c-0.293-0.293-0.768-0.293-1.060 0s-0.293 0.768 0 1.060l4.864 4.864c0.147 0.147 0.341 0.221 0.533 0.219 0.194 0 0.386-0.072 0.533-0.219l4.865-4.864c0.293-0.293 0.293-0.768 0-1.060s-0.768-0.293-1.061 0z'/></svg>")
21284
+ );
21055
21285
  background-size: 20px 20px;
21286
+ color: var(--text-color);
21287
+
21288
+ &:focus {
21289
+ outline: 2px solid var(--outline-default-color);
21290
+ outline-offset: 2px;
21291
+ box-shadow: none;
21292
+ }
21056
21293
  }
21057
21294
 
21058
21295
  .select {
@@ -21063,7 +21300,7 @@ input[type="radio"]:focus + div {
21063
21300
  position: relative;
21064
21301
  display: block;
21065
21302
 
21066
- select {
21303
+ & select {
21067
21304
  height: 40px;
21068
21305
  border: 0;
21069
21306
  width: 100%;
@@ -21079,7 +21316,7 @@ input[type="radio"]:focus + div {
21079
21316
  position: absolute;
21080
21317
  right: 0;
21081
21318
  top: 0;
21082
- background: var(--white, #fff);
21319
+ background: var(--base-light, var(--white, #fff));
21083
21320
  z-index: 3;
21084
21321
  text-align: center;
21085
21322
  width: 30px;
@@ -21099,7 +21336,7 @@ input[type="text"]::-ms-clear {
21099
21336
  .check {
21100
21337
  position: relative;
21101
21338
  cursor: pointer;
21102
- border: 1px solid #ccc;
21339
+ border: 1px solid var(--border-color-default, #d4d4d7);
21103
21340
  min-width: 100px;
21104
21341
  }
21105
21342
 
@@ -21108,7 +21345,7 @@ input[type="checkbox"]:checked + .color-white--checked,
21108
21345
  input[type="radio"]:checked + .color-white--checked,
21109
21346
  input[type="checkbox"]:checked + * .color-white--checked,
21110
21347
  input[type="radio"]:checked + * .color-white--checked {
21111
- color: #fff !important;
21348
+ color: var(--base-light, var(--white, #fff)) !important;
21112
21349
  }
21113
21350
 
21114
21351
  input[type="checkbox"]:focus + .btn,
@@ -21122,10 +21359,16 @@ input[type="radio"]:focus + .btn {
21122
21359
 
21123
21360
  /* Accessibilty focus */
21124
21361
  input:focus,
21362
+ input.form-control:focus,
21125
21363
  textarea:focus,
21364
+ textarea.form-control:focus,
21126
21365
  button:focus,
21127
- select:focus {
21366
+ button.form-control:focus,
21367
+ select:focus,
21368
+ select.form-control:focus {
21128
21369
  outline: 2px solid var(--outline-default-color);
21370
+ outline-offset: 2px;
21371
+ box-shadow: none;
21129
21372
  }
21130
21373
 
21131
21374
  /* bootstrap 4.4.1 adjustments */
@@ -21135,6 +21378,29 @@ select:focus {
21135
21378
 
21136
21379
  .invalid-feedback {
21137
21380
  font-size: 0.75em;
21381
+ color: var(--brand-danger, #d62929);
21382
+ }
21383
+
21384
+ /* Custom Checkmark Variables Mapping */
21385
+ .form-check-input:checked[type="checkbox"] {
21386
+ --bs-form-check-bg-image: var(
21387
+ --cagov-form-check-bg-image,
21388
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
21389
+ );
21390
+ }
21391
+
21392
+ .form-check-input:checked[type="radio"] {
21393
+ --bs-form-check-bg-image: var(
21394
+ --cagov-form-radio-bg-image,
21395
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")
21396
+ );
21397
+ }
21398
+
21399
+ .form-check-input[type="checkbox"]:indeterminate {
21400
+ --bs-form-check-bg-image: var(
21401
+ --cagov-form-indeterminate-bg-image,
21402
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
21403
+ );
21138
21404
  }
21139
21405
  /* -----------------------------------------
21140
21406
  CARDS - /src/css/cagov/cards.css
@@ -21191,10 +21457,10 @@ select:focus {
21191
21457
  .panel-heading,
21192
21458
  .card-heading,
21193
21459
  .card-header {
21194
- h2,
21195
- h3,
21196
- h4,
21197
- h5 {
21460
+ & h2,
21461
+ & h3,
21462
+ & h4,
21463
+ & h5 {
21198
21464
  font-family: var(--headings-font-family);
21199
21465
  font-weight: var(--headings-font-weight, 400);
21200
21466
  line-height: var(--headings-line-height);
@@ -21204,7 +21470,7 @@ select:focus {
21204
21470
  display: inline-block;
21205
21471
  margin: -8px 0 0;
21206
21472
 
21207
- small,
21473
+ & small,
21208
21474
  .small {
21209
21475
  font-weight: normal;
21210
21476
  line-height: 1;
@@ -21212,7 +21478,7 @@ select:focus {
21212
21478
  font-size: 75%;
21213
21479
  }
21214
21480
 
21215
- span[class^="ca-gov-icon-"] {
21481
+ & span[class^="ca-gov-icon-"] {
21216
21482
  font-size: 2rem;
21217
21483
  position: relative;
21218
21484
  top: 4px;
@@ -21276,15 +21542,15 @@ select:focus {
21276
21542
  color: var(--white, #fff);
21277
21543
 
21278
21544
  .card-header {
21279
- h2,
21280
- h3,
21281
- h4,
21282
- h5 {
21545
+ & h2,
21546
+ & h3,
21547
+ & h4,
21548
+ & h5 {
21283
21549
  color: var(--white, #fff);
21284
21550
  }
21285
21551
  }
21286
21552
 
21287
- a:not(.btn) {
21553
+ & a:not(.btn) {
21288
21554
  color: var(--white, #fff);
21289
21555
  text-decoration: none;
21290
21556
 
@@ -21309,7 +21575,7 @@ select:focus {
21309
21575
  color: var(--white, #fff);
21310
21576
 
21311
21577
  /* stylelint-disable-next-line no-descending-specificity */
21312
- a:not(.btn) {
21578
+ & a:not(.btn) {
21313
21579
  color: var(--color-s3, #4993b5);
21314
21580
  text-decoration: none;
21315
21581
 
@@ -21328,10 +21594,10 @@ select:focus {
21328
21594
  .card-header {
21329
21595
  border-bottom: var(--card-border-width) solid rgb(255 255 255 / 20%);
21330
21596
 
21331
- h2,
21332
- h3,
21333
- h4,
21334
- h5 {
21597
+ & h2,
21598
+ & h3,
21599
+ & h4,
21600
+ & h5 {
21335
21601
  color: var(--white, #fff);
21336
21602
  }
21337
21603
  }
@@ -21347,16 +21613,16 @@ select:focus {
21347
21613
  color: var(--white, #fff);
21348
21614
 
21349
21615
  .card-header {
21350
- h2,
21351
- h3,
21352
- h4,
21353
- h5 {
21616
+ & h2,
21617
+ & h3,
21618
+ & h4,
21619
+ & h5 {
21354
21620
  color: var(--white, #fff);
21355
21621
  }
21356
21622
  }
21357
21623
 
21358
21624
  /* stylelint-disable-next-line no-descending-specificity */
21359
- a:not(.btn) {
21625
+ & a:not(.btn) {
21360
21626
  color: var(--gray-900, #3b3a48);
21361
21627
  text-decoration: none;
21362
21628
 
@@ -21379,16 +21645,16 @@ select:focus {
21379
21645
  color: var(--white, #fff);
21380
21646
 
21381
21647
  .card-header {
21382
- h2,
21383
- h3,
21384
- h4,
21385
- h5 {
21648
+ & h2,
21649
+ & h3,
21650
+ & h4,
21651
+ & h5 {
21386
21652
  color: var(--white, #fff);
21387
21653
  }
21388
21654
  }
21389
21655
 
21390
21656
  /* stylelint-disable-next-line no-descending-specificity */
21391
- a:not(.btn) {
21657
+ & a:not(.btn) {
21392
21658
  color: var(--white, #fff);
21393
21659
  text-decoration: none;
21394
21660
 
@@ -21411,16 +21677,16 @@ select:focus {
21411
21677
  color: var(--white, #fff);
21412
21678
 
21413
21679
  .card-header {
21414
- h2,
21415
- h3,
21416
- h4,
21417
- h5 {
21680
+ & h2,
21681
+ & h3,
21682
+ & h4,
21683
+ & h5 {
21418
21684
  color: var(--white, #fff);
21419
21685
  }
21420
21686
  }
21421
21687
 
21422
21688
  /* stylelint-disable-next-line no-descending-specificity */
21423
- a:not(.btn) {
21689
+ & a:not(.btn) {
21424
21690
  color: var(--gray-900, #3b3a48);
21425
21691
  text-decoration: none;
21426
21692
 
@@ -21443,16 +21709,16 @@ select:focus {
21443
21709
  color: var(--white, #fff);
21444
21710
 
21445
21711
  .card-header {
21446
- h2,
21447
- h3,
21448
- h4,
21449
- h5 {
21712
+ & h2,
21713
+ & h3,
21714
+ & h4,
21715
+ & h5 {
21450
21716
  color: var(--white, #fff);
21451
21717
  }
21452
21718
  }
21453
21719
 
21454
21720
  /* stylelint-disable-next-line no-descending-specificity */
21455
- a:not(.btn) {
21721
+ & a:not(.btn) {
21456
21722
  color: var(--black, #000);
21457
21723
  text-decoration: none;
21458
21724
 
@@ -21518,14 +21784,15 @@ select:focus {
21518
21784
  .card {
21519
21785
  position: relative;
21520
21786
  display: block;
21521
- background-color: var(--white, #fff);
21787
+ background-color: var(--card-bg, var(--white, #fff));
21522
21788
  border: none;
21523
21789
  border-radius: var(--card-border-radius);
21790
+ color: var(--text-color, var(--gray-900, #3b3a48));
21524
21791
 
21525
21792
  .card-body {
21526
21793
  padding: 1.5rem;
21527
21794
 
21528
- p {
21795
+ & p {
21529
21796
  margin-bottom: 0;
21530
21797
  }
21531
21798
  }
@@ -21557,7 +21824,7 @@ select:focus {
21557
21824
  font-size: var(--font-size-h4);
21558
21825
 
21559
21826
  /* stylelint-disable-next-line no-descending-specificity */
21560
- a {
21827
+ & a {
21561
21828
  text-decoration: none !important;
21562
21829
  }
21563
21830
  }
@@ -21566,22 +21833,22 @@ select:focus {
21566
21833
  .card-default,
21567
21834
  .panel-default {
21568
21835
  border: 1px solid;
21569
- border-color: var(--gray-200, #d4d4d7);
21836
+ border-color: var(--border-color-default, #d4d4d7);
21570
21837
 
21571
21838
  > .panel-heading,
21572
21839
  > .card-heading {
21573
21840
  color: var(--gray-900, #3b3a48);
21574
21841
  background-color: var(--gray-75, #f3f3f4);
21575
- border-color: var(--gray-200, #d4d4d7);
21842
+ border-color: var(--border-color-default, #d4d4d7);
21576
21843
 
21577
21844
  + .panel-collapse > .panel-body,
21578
21845
  + .card-collapse > .card-body {
21579
- border-top-color: var(--gray-200, #d4d4d7);
21846
+ border-top-color: var(--border-color-default, #d4d4d7);
21580
21847
  }
21581
21848
 
21582
21849
  .badge {
21583
21850
  color: var(--gray-75, #f3f3f4);
21584
- background-color: var(--gray-900, #3b3a48);
21851
+ background-color: var(--text-color, #3b3a48);
21585
21852
  }
21586
21853
  }
21587
21854
 
@@ -21596,11 +21863,13 @@ select:focus {
21596
21863
  .card-heading,
21597
21864
  .card-header,
21598
21865
  .panel-heading {
21599
- h2,
21600
- h3,
21601
- h4,
21602
- h5 {
21603
- span[class^="ca-gov-icon-"] {
21866
+ & h2,
21867
+ & h3,
21868
+ & h4,
21869
+ & h5 {
21870
+ color: var(--gray-900, #3b3a48);
21871
+
21872
+ & span[class^="ca-gov-icon-"] {
21604
21873
  color: var(--color-p3, #323a45);
21605
21874
  }
21606
21875
  }
@@ -21624,10 +21893,10 @@ select:focus {
21624
21893
  background-color: var(--color-p2, #046b99);
21625
21894
  border-color: var(--color-p2, #046b99);
21626
21895
 
21627
- h2,
21628
- h3,
21629
- h4,
21630
- h5 {
21896
+ & h2,
21897
+ & h3,
21898
+ & h4,
21899
+ & h5 {
21631
21900
  color: var(--white, #fff);
21632
21901
  }
21633
21902
 
@@ -21656,11 +21925,11 @@ select:focus {
21656
21925
  border-bottom-width: 5px;
21657
21926
  border-bottom-style: solid;
21658
21927
 
21659
- h2,
21660
- h3,
21661
- h4,
21662
- h5 {
21663
- span[class^="ca-gov-icon-"] {
21928
+ & h2,
21929
+ & h3,
21930
+ & h4,
21931
+ & h5 {
21932
+ & span[class^="ca-gov-icon-"] {
21664
21933
  color: var(--white, #fff);
21665
21934
  }
21666
21935
  }
@@ -21672,18 +21941,18 @@ select:focus {
21672
21941
  color: var(--gray-900, #3b3a48);
21673
21942
 
21674
21943
  /* stylelint-disable-next-line no-descending-specificity */
21675
- a:not(.btn) {
21944
+ & a:not(.btn) {
21676
21945
  color: var(--link-color, #046b99);
21677
21946
  text-decoration: none;
21678
21947
 
21679
21948
  &:hover,
21680
21949
  &:focus {
21681
- color: var(--link-hover-color, #005a7f);
21950
+ color: var(--link-color-hover, #005a7f);
21682
21951
  text-decoration: underline;
21683
21952
  }
21684
21953
 
21685
21954
  &:focus {
21686
- outline: 2px solid var(--link-hover-color, #005a7f);
21955
+ outline: 2px solid var(--link-color-hover, #005a7f);
21687
21956
  outline-offset: -2px;
21688
21957
  }
21689
21958
  }
@@ -21727,11 +21996,11 @@ select:focus {
21727
21996
  border-bottom-width: 2px;
21728
21997
  border-bottom-style: solid;
21729
21998
 
21730
- h2,
21731
- h3,
21732
- h4,
21733
- h5 {
21734
- span[class^="ca-gov-icon-"] {
21999
+ & h2,
22000
+ & h3,
22001
+ & h4,
22002
+ & h5 {
22003
+ & span[class^="ca-gov-icon-"] {
21735
22004
  color: var(--color-p3, #323a45);
21736
22005
  }
21737
22006
  }
@@ -21755,10 +22024,10 @@ select:focus {
21755
22024
  background-color: var(--color-p3, #323a45);
21756
22025
  border-color: var(--color-p3, #323a45);
21757
22026
 
21758
- h2,
21759
- h3,
21760
- h4,
21761
- h5 {
22027
+ & h2,
22028
+ & h3,
22029
+ & h4,
22030
+ & h5 {
21762
22031
  color: var(--white, #fff);
21763
22032
  }
21764
22033
 
@@ -21787,11 +22056,11 @@ select:focus {
21787
22056
  border-bottom-width: 5px;
21788
22057
  border-bottom-style: solid;
21789
22058
 
21790
- h2,
21791
- h3,
21792
- h4,
21793
- h5 {
21794
- span[class^="ca-gov-icon-"] {
22059
+ & h2,
22060
+ & h3,
22061
+ & h4,
22062
+ & h5 {
22063
+ & span[class^="ca-gov-icon-"] {
21795
22064
  color: var(--color-p1, #fdb81e);
21796
22065
  }
21797
22066
  }
@@ -21803,18 +22072,18 @@ select:focus {
21803
22072
  color: var(--gray-900, #3b3a48);
21804
22073
 
21805
22074
  /* stylelint-disable-next-line no-descending-specificity */
21806
- a:not(.btn) {
22075
+ & a:not(.btn) {
21807
22076
  color: var(--link-color, #046b99);
21808
22077
  text-decoration: none;
21809
22078
 
21810
22079
  &:hover,
21811
22080
  &:focus {
21812
- color: var(--link-hover-color, #005a7f);
22081
+ color: var(--link-color-hover, #005a7f);
21813
22082
  text-decoration: underline;
21814
22083
  }
21815
22084
 
21816
22085
  &:focus {
21817
- outline: 2px solid var(--link-hover-color, #005a7f);
22086
+ outline: 2px solid var(--link-color-hover, #005a7f);
21818
22087
  outline-offset: -2px;
21819
22088
  }
21820
22089
  }
@@ -21855,17 +22124,17 @@ select:focus {
21855
22124
  border-radius: 0;
21856
22125
  padding: 0;
21857
22126
 
21858
- h2,
21859
- h3,
21860
- h4,
21861
- h5 {
22127
+ & h2,
22128
+ & h3,
22129
+ & h4,
22130
+ & h5 {
21862
22131
  margin: 0;
21863
22132
  display: block;
21864
22133
  text-align: center;
21865
22134
  padding: 10px 15px 10px 40px;
21866
22135
  position: relative;
21867
22136
 
21868
- span[class^="ca-gov-icon-"] {
22137
+ & span[class^="ca-gov-icon-"] {
21869
22138
  font-size: 1.8rem;
21870
22139
  position: absolute;
21871
22140
  left: 10px;
@@ -21883,14 +22152,16 @@ select:focus {
21883
22152
  ----------------------------------------- */
21884
22153
 
21885
22154
  /* Adding the explicit classes below so that they are available in Rich Text Editor */
22155
+ .table > :not(caption) > * > * {
22156
+ color: var(--text-color, #3b3a48);
22157
+ border-color: var(--border-color-default, #d4d4d7);
22158
+ }
21886
22159
 
21887
22160
  table.table {
21888
22161
  border-spacing: 0;
21889
22162
  }
21890
22163
 
21891
22164
  .table {
21892
- color: var(--gray-900, #3b3a48);
21893
-
21894
22165
  &.table-default {
21895
22166
  border: none;
21896
22167
 
@@ -21900,8 +22171,9 @@ table.table {
21900
22171
  > tr {
21901
22172
  > th,
21902
22173
  > td {
21903
- background: #f3f3f4;
21904
- border: 2px solid #fff;
22174
+ background: var(--default-bg, #fafafa);
22175
+ border: 2px solid var(--body-bg, #fff);
22176
+ color: var(--text-color, #3b3a48);
21905
22177
  }
21906
22178
  }
21907
22179
  }
@@ -21909,15 +22181,19 @@ table.table {
21909
22181
  > thead > tr {
21910
22182
  > th,
21911
22183
  > td {
21912
- background: #d9d9d9;
21913
- border: 2px solid #fff;
22184
+ background: var(--default-bg-darker, #d9d9d9);
22185
+ border: 2px solid var(--body-bg, #fff);
21914
22186
  }
21915
22187
  }
21916
22188
  }
21917
22189
  }
21918
22190
 
21919
22191
  .table-striped > tbody > tr:nth-of-type(2n + 1) > * {
21920
- color: var(--gray-900, #3b3a48);
22192
+ color: var(--text-color, #3b3a48);
22193
+ }
22194
+
22195
+ .table-striped > tbody > tr:nth-of-type(odd) > * {
22196
+ background: var(--default-bg, #fafafa);
21921
22197
  }
21922
22198
  /* -----------------------------------------
21923
22199
  LIST STYLES /src/css/cagov/lists.css
@@ -22312,7 +22588,7 @@ blockquote {
22312
22588
  padding: 11px 22px;
22313
22589
  margin: 0 0 22px;
22314
22590
  border-left: 4px solid;
22315
- border-color: var(--color-p2, #046b99);
22591
+ border-color: var(--link-color, var(--color-p2, #046b99));
22316
22592
 
22317
22593
  @media (width >= 576px) {
22318
22594
  font-size: calc(var(--font-size-regular) + var(--ratio));
@@ -22323,10 +22599,10 @@ blockquote {
22323
22599
  font-family: CaGov;
22324
22600
  font-size: 3rem;
22325
22601
  line-height: 2rem;
22326
- color: var(--color-p2, #046b99);
22602
+ color: var(--link-color, var(--color-p2, #046b99));
22327
22603
  }
22328
22604
 
22329
- footer {
22605
+ & footer {
22330
22606
  display: block;
22331
22607
  font-size: 80%;
22332
22608
  color: var(--blockquote-small-color);
@@ -22348,8 +22624,8 @@ blockquote {
22348
22624
  &.prominent {
22349
22625
  text-align: center;
22350
22626
 
22351
- p,
22352
- footer {
22627
+ & p,
22628
+ & footer {
22353
22629
  text-align: left;
22354
22630
  }
22355
22631
 
@@ -22359,13 +22635,13 @@ blockquote {
22359
22635
  &.prominent {
22360
22636
  border-radius: 1rem;
22361
22637
  padding: 2rem;
22362
- background-color: var(--color-p2, #046b99);
22363
- color: var(--white, #fff);
22638
+ background-color: var(--link-color, var(--color-p2, #046b99));
22639
+ color: var(--base-light, var(--white, #fff));
22364
22640
 
22365
- p,
22366
- footer,
22641
+ & p,
22642
+ & footer,
22367
22643
  &::before {
22368
- color: var(--white, #fff);
22644
+ color: var(--base-light, var(--white, #fff));
22369
22645
  }
22370
22646
  }
22371
22647
 
@@ -22376,9 +22652,9 @@ blockquote {
22376
22652
  border-left: 0;
22377
22653
  text-align: right;
22378
22654
 
22379
- footer,
22380
- small,
22381
- .small {
22655
+ & footer,
22656
+ & small,
22657
+ & .small {
22382
22658
  &::before {
22383
22659
  content: "";
22384
22660
  }
@@ -22396,18 +22672,21 @@ blockquote {
22396
22672
 
22397
22673
  /* PRIMARY BUTTON */
22398
22674
  .btn-primary {
22399
- color: var(--white, #fff);
22400
- background-color: var(--color-p2, #046b99);
22401
- border-color: var(--color-p2, #046b99);
22675
+ color: var(--primary-btn-color, #fff);
22676
+ background-color: var(--primary-btn-bg, var(--color-p2, #046b99));
22677
+ border-color: var(--primary-btn-border-color, var(--color-p2, #046b99));
22402
22678
  font-weight: var(--font-weight-6);
22403
22679
 
22404
22680
  &:focus {
22405
- outline: solid 2px var(--outline-dark-mode-color, #85cbf9) !important;
22681
+ outline: solid 2px var(--outline-primary-btn, #85cbf9) !important;
22406
22682
  outline-offset: -4px;
22407
22683
  }
22408
22684
 
22409
22685
  &:disabled {
22410
- color: var(--white, #fff) !important;
22686
+ color: var(
22687
+ --primary-btn-color-disabled,
22688
+ var(--primary-btn-color, #fff)
22689
+ ) !important;
22411
22690
  }
22412
22691
 
22413
22692
  .badge {
@@ -22422,9 +22701,15 @@ blockquote {
22422
22701
  .btn-primary:not(:disabled, .disabled).active,
22423
22702
  .btn-primary .show > .dropdown-toggle,
22424
22703
  .open > .dropdown-toggle .btn-primary {
22425
- color: var(--white, #fff);
22426
- background-color: var(--color-p2-darker, #214a68);
22427
- border-color: var(--color-p2-darker, #214a68);
22704
+ color: var(--primary-btn-color-hover, var(--white, #fff));
22705
+ background-color: var(
22706
+ --primary-btn-bg-hover,
22707
+ var(--color-p2-darker, #214a68)
22708
+ );
22709
+ border-color: var(
22710
+ --primary-btn-border-color-hover,
22711
+ var(--color-p2-darker, #214a68)
22712
+ );
22428
22713
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22429
22714
  background-image: none;
22430
22715
  }
@@ -22444,25 +22729,38 @@ fieldset[disabled] .btn-primary:hover,
22444
22729
  fieldset[disabled] .btn-primary:focus,
22445
22730
  fieldset[disabled] .btn-primary:active,
22446
22731
  fieldset[disabled] .btn-primary.active {
22447
- background-color: var(--color-p2, #046b99) !important;
22448
- border-color: var(--color-p2, #046b99);
22732
+ color: var(
22733
+ --primary-btn-color-disabled,
22734
+ var(--primary-btn-color, #fff)
22735
+ ) !important;
22736
+ background-color: var(
22737
+ --primary-btn-bg-disabled,
22738
+ var(--primary-btn-bg, var(--color-p2, #046b99))
22739
+ ) !important;
22740
+ border-color: var(
22741
+ --primary-btn-border-color-disabled,
22742
+ var(--primary-btn-border-color, var(--color-p2, #046b99))
22743
+ );
22449
22744
  }
22450
22745
 
22451
22746
  /* PRIMARY OUTLINE BUTTON */
22452
22747
  .btn-outline-primary {
22453
- color: var(--color-p2, #046b99);
22454
- background-color: var(--white, #fff);
22455
- border-color: var(--color-p2, #046b99);
22748
+ color: var(--primary-outline-btn-color, var(--color-p2, #046b99));
22749
+ background-color: var(--primary-outline-btn-bg, var(--white, #fff));
22750
+ border-color: var(
22751
+ --primary-outline-btn-border-color,
22752
+ var(--color-p2, #046b99)
22753
+ );
22456
22754
  font-weight: var(--font-weight-6);
22457
22755
 
22458
22756
  &:focus {
22459
- outline: solid 2px var(--outline-default-color) !important;
22757
+ outline: solid 2px var(--outline-primary-outline-btn, var(--white, #fff)) !important;
22460
22758
  outline-offset: -4px;
22461
22759
  }
22462
22760
 
22463
22761
  .badge {
22464
22762
  color: var(--white, #fff);
22465
- background-color: var(--color-p2, #046b99);
22763
+ background-color: var(--primary-btn-bg, var(--color-p2, #046b99));
22466
22764
  }
22467
22765
  }
22468
22766
 
@@ -22472,14 +22770,20 @@ fieldset[disabled] .btn-primary.active {
22472
22770
  .btn-outline-primary:not(:disabled, .disabled).active,
22473
22771
  .btn-outline-primary .show > .dropdown-toggle,
22474
22772
  .open > .dropdown-toggle .btn-outline-primary {
22475
- color: var(--color-p2-darker, #214a68);
22476
- background-color: var(--white, #fff);
22477
- border-color: var(--color-p2-darker, #214a68);
22773
+ color: var(
22774
+ --primary-outline-btn-color-hover,
22775
+ var(--color-p2-darker, #214a68)
22776
+ );
22777
+ background-color: var(--primary-outline-btn-bg-hover, var(--white, #fff));
22778
+ border-color: var(
22779
+ --primary-outline-btn-border-color-hover,
22780
+ var(--color-p2-darker, #214a68)
22781
+ );
22478
22782
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22479
22783
  background-image: none;
22480
22784
  }
22481
22785
 
22482
- .btn-outline-primary .btn-outline-primary.disabled,
22786
+ .btn-outline-primary.disabled,
22483
22787
  .btn-outline-primary.disabled:hover,
22484
22788
  .btn-outline-primary.disabled:focus,
22485
22789
  .btn-outline-primary.disabled:active,
@@ -22494,19 +22798,26 @@ fieldset[disabled] .btn-outline-primary:hover,
22494
22798
  fieldset[disabled] .btn-outline-primary:focus,
22495
22799
  fieldset[disabled] .btn-outline-primary:active,
22496
22800
  fieldset[disabled] .btn-outline-primary.active {
22497
- background-color: var(--white, #fff) !important;
22498
- border-color: var(--color-p2, #046b99);
22801
+ color: var(--primary-outline-btn-color-disabled, var(--color-p2, #046b99));
22802
+ background-color: var(
22803
+ --primary-outline-btn-bg-disabled,
22804
+ var(--primary-outline-btn-bg, var(--white, #fff))
22805
+ ) !important;
22806
+ border-color: var(
22807
+ --primary-outline-btn-border-color-disabled,
22808
+ var(--primary-outline-btn-border-color, var(--color-p2, #046b99))
22809
+ );
22499
22810
  }
22500
22811
 
22501
22812
  /* DEFAULT BUTTON */
22502
22813
  .btn-default {
22503
- color: var(--gray-700, #5e5e6a);
22504
- background-color: var(--gray-50, #fafafa);
22505
- border-color: var(--gray-700, #5e5e6a);
22814
+ color: var(--default-btn-color, var(--gray-700, #5e5e6a));
22815
+ background-color: var(--default-btn-bg, var(--gray-50, #fafafa));
22816
+ border-color: var(--default-btn-border-color, var(--gray-700, #5e5e6a));
22506
22817
  font-weight: var(--font-weight-6);
22507
22818
 
22508
22819
  &:focus {
22509
- outline: solid 2px var(--outline-default-color) !important;
22820
+ outline: solid 2px var(--outline-default-btn, var(--outline-default-color)) !important;
22510
22821
  outline-offset: -4px;
22511
22822
  }
22512
22823
 
@@ -22522,9 +22833,9 @@ fieldset[disabled] .btn-outline-primary.active {
22522
22833
  .btn-default:not(:disabled, .disabled).active,
22523
22834
  .btn-default .show > .dropdown-toggle,
22524
22835
  .open > .dropdown-toggle .btn-default {
22525
- color: var(--black, #000);
22526
- background-color: var(--gray-75, #f8f9fa);
22527
- border-color: var(--black, #000);
22836
+ color: var(--default-btn-color-hover, var(--black, #000));
22837
+ background-color: var(--default-btn-bg-hover, var(--gray-75, #f8f9fa));
22838
+ border-color: var(--default-btn-border-color-hover, var(--black, #000));
22528
22839
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22529
22840
  background-image: none;
22530
22841
  }
@@ -22544,19 +22855,26 @@ fieldset[disabled] .btn-default:hover,
22544
22855
  fieldset[disabled] .btn-default:focus,
22545
22856
  fieldset[disabled] .btn-default:active,
22546
22857
  fieldset[disabled] .btn-default.active {
22547
- background-color: rgba(255 255 255 / 65%) !important;
22548
- border-color: var(--gray-700, #5e5e6a);
22858
+ background-color: var(
22859
+ --default-btn-bg-disabled,
22860
+ var(--default-btn-bg, rgba(255 255 255 / 65%))
22861
+ ) !important;
22862
+ border-color: var(
22863
+ --default-btn-border-color-disabled,
22864
+ var(--default-btn-border-color, var(--gray-700, #5e5e6a))
22865
+ );
22549
22866
  }
22550
22867
 
22551
22868
  /* STANDOUT BUTTON */
22552
22869
  .btn-standout {
22553
- color: var(--white, #fff);
22554
- background-color: var(--color-p3, #323a45);
22555
- border-color: var(--color-p3, #323a45);
22870
+ color: var(--standout-btn-color, var(--white, #fff));
22871
+ background-color: var(--standout-btn-bg, var(--color-p3, #323a45));
22872
+ border-color: var(--standout-btn-border-color, var(--color-p3, #323a45));
22556
22873
  font-weight: var(--font-weight-6);
22557
22874
 
22558
22875
  &:focus {
22559
- outline: solid 2px var(--outline-dark-mode-color, #85cbf9) !important;
22876
+ outline: solid 2px
22877
+ var(--outline-standout-btn, var(--outline-dark-mode-color, #85cbf9)) !important;
22560
22878
  outline-offset: -4px;
22561
22879
  }
22562
22880
 
@@ -22567,7 +22885,10 @@ fieldset[disabled] .btn-default.active {
22567
22885
 
22568
22886
  &:disabled,
22569
22887
  &.disabled {
22570
- color: var(--white, #fff) !important;
22888
+ color: var(
22889
+ --standout-btn-color-disabled,
22890
+ var(--standout-btn-color, var(--white, #fff))
22891
+ ) !important;
22571
22892
  }
22572
22893
  }
22573
22894
 
@@ -22577,9 +22898,15 @@ fieldset[disabled] .btn-default.active {
22577
22898
  .btn-standout:not(:disabled, .disabled).active,
22578
22899
  .btn-standout .show > .dropdown-toggle,
22579
22900
  .open > .dropdown-toggle .btn-standout {
22580
- color: var(--white, #fff);
22581
- background-color: var(--color-p3-darker, #242830);
22582
- border-color: var(--color-p3-darker, #242830);
22901
+ color: var(--standout-btn-color-hover, var(--white, #fff));
22902
+ background-color: var(
22903
+ --standout-btn-bg-hover,
22904
+ var(--color-p3-darker, #242830)
22905
+ );
22906
+ border-color: var(
22907
+ --standout-btn-border-color-hover,
22908
+ var(--color-p3-darker, #242830)
22909
+ );
22583
22910
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22584
22911
  background-image: none;
22585
22912
  }
@@ -22599,19 +22926,29 @@ fieldset[disabled] .btn-standout:hover,
22599
22926
  fieldset[disabled] .btn-standout:focus,
22600
22927
  fieldset[disabled] .btn-standout:active,
22601
22928
  fieldset[disabled] .btn-standout.active {
22602
- background-color: var(--color-p3, #323a45) !important;
22603
- border-color: var(--color-p3, #323a45);
22929
+ background-color: var(
22930
+ --standout-btn-bg-disabled,
22931
+ var(--standout-btn-bg, var(--color-p3, #323a45))
22932
+ ) !important;
22933
+ border-color: var(
22934
+ --standout-btn-border-color-disabled,
22935
+ var(--standout-btn-border-color, var(--color-p3, #323a45))
22936
+ );
22604
22937
  }
22605
22938
 
22606
22939
  /* STANDOUT OUTLINE BUTTON */
22607
22940
  .btn-outline-standout {
22608
- color: var(--color-p3, #323a45);
22609
- background-color: var(--white, #fff);
22610
- border-color: var(--color-p3, #323a45);
22941
+ color: var(--standout-outline-btn-color, var(--color-p3, #323a45));
22942
+ background-color: var(--standout-outline-btn-bg, var(--white, #fff));
22943
+ border-color: var(
22944
+ --standout-outline-btn-border-color,
22945
+ var(--color-p3, #323a45)
22946
+ );
22611
22947
  font-weight: var(--font-weight-6);
22612
22948
 
22613
22949
  &:focus {
22614
- outline: solid 2px var(--outline-default-color) !important;
22950
+ outline: solid 2px
22951
+ var(--outline-standout-outline-btn, var(--outline-default-color)) !important;
22615
22952
  outline-offset: -4px;
22616
22953
  }
22617
22954
 
@@ -22627,9 +22964,15 @@ fieldset[disabled] .btn-standout.active {
22627
22964
  .btn-outline-standout:not(:disabled, .disabled).active,
22628
22965
  .btn-outline-standout .show > .dropdown-toggle,
22629
22966
  .open > .dropdown-toggle .btn-outline-standout {
22630
- color: var(--color-p3-darker, #242830);
22631
- background-color: var(--white, #fff);
22632
- border-color: var(--color-p3-darker, #242830);
22967
+ color: var(
22968
+ --standout-outline-btn-color-hover,
22969
+ var(--color-p3-darker, #242830)
22970
+ );
22971
+ background-color: var(--standout-outline-btn-bg-hover, var(--white, #fff));
22972
+ border-color: var(
22973
+ --standout-outline-btn-border-color-hover,
22974
+ var(--color-p3-darker, #242830)
22975
+ );
22633
22976
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22634
22977
  background-image: none;
22635
22978
  }
@@ -22649,19 +22992,28 @@ fieldset[disabled] .btn-outline-standout:hover,
22649
22992
  fieldset[disabled] .btn-outline-standout:focus,
22650
22993
  fieldset[disabled] .btn-outline-standout:active,
22651
22994
  fieldset[disabled] .btn-outline-standout.active {
22652
- background-color: var(--white, #fff) !important;
22653
- border-color: var(--color-p3, #323a45);
22995
+ background-color: var(
22996
+ --standout-outline-btn-bg-disabled,
22997
+ var(--standout-outline-btn-bg, var(--white, #fff))
22998
+ ) !important;
22999
+ border-color: var(
23000
+ --standout-outline-btn-border-color-disabled,
23001
+ var(--standout-outline-btn-border-color, var(--color-p3, #323a45))
23002
+ );
22654
23003
  }
22655
23004
 
22656
23005
  /* HIGHLIGHT BUTTON */
22657
23006
  .btn-highlight {
22658
- color: var(--black, #000);
22659
- background-color: var(--color-p1-light, #f2c45a);
22660
- border-color: var(--color-p1-light, #f2c45a);
23007
+ color: var(--highlight-btn-color, var(--black, #000));
23008
+ background-color: var(--highlight-btn-bg, var(--color-p1-light, #f2c45a));
23009
+ border-color: var(
23010
+ --highlight-btn-border-color,
23011
+ var(--color-p1-light, #f2c45a)
23012
+ );
22661
23013
  font-weight: var(--font-weight-6);
22662
23014
 
22663
23015
  &:focus {
22664
- outline: solid 2px var(--black, #000) !important;
23016
+ outline: solid 2px var(--outline-highlight-btn, var(--black, #000)) !important;
22665
23017
  outline-offset: -4px;
22666
23018
  }
22667
23019
 
@@ -22677,9 +23029,15 @@ fieldset[disabled] .btn-outline-standout.active {
22677
23029
  .btn-highlight:not(:disabled, .disabled).active,
22678
23030
  .btn-highlight .show > .dropdown-toggle,
22679
23031
  .open > .dropdown-toggle .btn-highlight {
22680
- color: var(--gray-900, #3b3a48);
22681
- background-color: var(--color-p1-lighter, #f5ce73);
22682
- border-color: var(--color-p1-lighter, #f5ce73);
23032
+ color: var(--highlight-btn-color-hover, var(--gray-900, #3b3a48));
23033
+ background-color: var(
23034
+ --highlight-btn-bg-hover,
23035
+ var(--color-p1-lighter, #f5ce73)
23036
+ );
23037
+ border-color: var(
23038
+ --highlight-btn-border-color-hover,
23039
+ var(--color-p1-lighter, #f5ce73)
23040
+ );
22683
23041
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22684
23042
  background-image: none;
22685
23043
  }
@@ -22699,19 +23057,30 @@ fieldset[disabled] .btn-highlight:hover,
22699
23057
  fieldset[disabled] .btn-highlight:focus,
22700
23058
  fieldset[disabled] .btn-highlight:active,
22701
23059
  fieldset[disabled] .btn-highlight.active {
22702
- background-color: var(--color-p1-light, #f2c45a) !important;
22703
- border-color: var(--color-p1-light, #f2c45a);
23060
+ color: var(--highlight-btn-color-disabled, var(--black, #000));
23061
+ background-color: var(
23062
+ --highlight-btn-bg-disabled,
23063
+ var(--highlight-btn-bg, var(--color-p1-light, #f2c45a))
23064
+ ) !important;
23065
+ border-color: var(
23066
+ --highlight-btn-border-color-disabled,
23067
+ var(--highlight-btn-border-color, var(--color-p1-light, #f2c45a))
23068
+ );
22704
23069
  }
22705
23070
 
22706
23071
  /* HIGHLIGHT OUTLINE BUTTON */
22707
23072
  .btn-outline-highlight {
22708
- color: var(--black, #000);
22709
- background-color: transparent;
22710
- border-color: var(--color-p1-light, #f2c45a);
23073
+ color: var(--highlight-outline-btn-color, var(--black, #000));
23074
+ background-color: var(--highlight-outline-btn-bg, transparent);
23075
+ border-color: var(
23076
+ --highlight-outline-btn-border-color,
23077
+ var(--color-p1-light, #f2c45a)
23078
+ );
22711
23079
  font-weight: var(--font-weight-6);
22712
23080
 
22713
23081
  &:focus {
22714
- outline: solid 2px var(--outline-default-color) !important;
23082
+ outline: solid 2px
23083
+ var(--outline-highlight-outline-btn, var(--outline-default-color)) !important;
22715
23084
  outline-offset: -4px;
22716
23085
  }
22717
23086
 
@@ -22727,9 +23096,15 @@ fieldset[disabled] .btn-highlight.active {
22727
23096
  .btn-outline-highlight:not(:disabled, .disabled).active,
22728
23097
  .btn-outline-highlight .show > .dropdown-toggle,
22729
23098
  .open > .dropdown-toggle .btn-outline-highlight {
22730
- color: var(--gray-900, #3b3a48);
22731
- background-color: var(--gray-50, #fafafa);
22732
- border-color: var(--color-p1-lighter, #f5ce73);
23099
+ color: var(--highlight-outline-btn-color-hover, var(--gray-900, #3b3a48));
23100
+ background-color: var(
23101
+ --highlight-outline-btn-bg-hover,
23102
+ var(--gray-50, #fafafa)
23103
+ );
23104
+ border-color: var(
23105
+ --highlight-outline-btn-border-color-hover,
23106
+ var(--color-p1-lighter, #f5ce73)
23107
+ );
22733
23108
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22734
23109
  background-image: none;
22735
23110
  }
@@ -22749,26 +23124,37 @@ fieldset[disabled] .btn-outline-highlight:hover,
22749
23124
  fieldset[disabled] .btn-outline-highlight:focus,
22750
23125
  fieldset[disabled] .btn-outline-highlight:active,
22751
23126
  fieldset[disabled] .btn-outline-highlight.active {
22752
- background-color: transparent !important;
22753
- border-color: var(--color-p1-light, #f2c45a);
23127
+ color: var(--highlight-outline-btn-color-disabled, var(--gray-900, #3b3a48));
23128
+ background-color: var(
23129
+ --highlight-outline-btn-bg-disabled,
23130
+ var(--highlight-outline-btn-bg, transparent)
23131
+ ) !important;
23132
+ border-color: var(
23133
+ --highlight-outline-btn-border-color-disabled,
23134
+ var(--highlight-outline-btn-border-color, var(--color-p1-light, #f2c45a))
23135
+ );
22754
23136
  }
22755
23137
 
22756
23138
  /* SECONDARY BUTTON */
22757
23139
  .btn-secondary {
22758
- color: var(--gray-700, #5e5e6a);
22759
- background-color: var(--gray-50, #fafafa);
22760
- border-color: var(--gray-700, #5e5e6a);
23140
+ color: var(--secondary-btn-color, var(--gray-700, #5e5e6a));
23141
+ background-color: var(--secondary-btn-bg, var(--gray-50, #fafafa));
23142
+ border-color: var(--secondary-btn-border-color, var(--gray-700, #5e5e6a));
22761
23143
  font-weight: var(--font-weight-6);
22762
23144
  border-width: 1px;
22763
23145
 
22764
23146
  &:focus {
22765
- outline: solid 2px var(--outline-default-color) !important;
23147
+ outline: solid 2px
23148
+ var(--outline-secondary-btn, var(--outline-default-color)) !important;
22766
23149
  outline-offset: -4px;
22767
23150
  }
22768
23151
 
22769
23152
  &:disabled,
22770
23153
  &.disabled {
22771
- color: var(--black, #000);
23154
+ color: var(
23155
+ --secondary-btn-color-disabled,
23156
+ var(--secondary-btn-color, var(--black, #000))
23157
+ );
22772
23158
  }
22773
23159
 
22774
23160
  &.active {
@@ -22789,9 +23175,9 @@ fieldset[disabled] .btn-outline-highlight.active {
22789
23175
  .btn-secondary:not(:disabled, .disabled).active,
22790
23176
  .btn-secondary .show > .dropdown-toggle,
22791
23177
  .open > .dropdown-toggle .btn-secondary {
22792
- color: var(--link-hover-color, #005a7f);
22793
- background-color: #fff;
22794
- border-color: var(--black, #000);
23178
+ color: var(--secondary-btn-color-hover, var(--link-color-hover, #005a7f));
23179
+ background-color: var(--secondary-btn-bg-hover, #fff);
23180
+ border-color: var(--secondary-btn-border-color-hover, var(--black, #000));
22795
23181
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22796
23182
  background-image: none;
22797
23183
  }
@@ -22811,20 +23197,30 @@ fieldset[disabled] .btn-secondary:hover,
22811
23197
  fieldset[disabled] .btn-secondary:focus,
22812
23198
  fieldset[disabled] .btn-secondary:active,
22813
23199
  fieldset[disabled] .btn-secondary.active {
22814
- background-color: var(--gray-50, #fafafa) !important;
22815
- border-color: var(--gray-700, #5e5e6a);
23200
+ background-color: var(
23201
+ --secondary-btn-bg-disabled,
23202
+ var(--secondary-btn-bg, var(--gray-50, #fafafa))
23203
+ ) !important;
23204
+ border-color: var(
23205
+ --secondary-btn-border-color-disabled,
23206
+ var(--secondary-btn-border-color, var(--gray-700, #5e5e6a))
23207
+ );
22816
23208
  }
22817
23209
 
22818
23210
  /* SECONDARY OUTLINE BUTTON */
22819
23211
  .btn-outline-secondary {
22820
- color: var(--gray-700, #5e5e6a);
22821
- background-color: var(--white, #fff);
22822
- border-color: var(--gray-700, #5e5e6a);
23212
+ color: var(--secondary-outline-btn-color, var(--gray-700, #5e5e6a));
23213
+ background-color: var(--secondary-outline-btn-bg, var(--white, #fff));
23214
+ border-color: var(
23215
+ --secondary-outline-btn-border-color,
23216
+ var(--gray-700, #5e5e6a)
23217
+ );
22823
23218
  font-weight: var(--font-weight-6);
22824
23219
 
22825
23220
  &:focus {
22826
- outline: solid 2px var(--outline-default-color) !important;
22827
- offset: -4px;
23221
+ outline: solid 2px
23222
+ var(--outline-secondary-outline-btn, var(--outline-default-color)) !important;
23223
+ outline-offset: -4px !important;
22828
23224
  }
22829
23225
 
22830
23226
  .badge {
@@ -22839,9 +23235,12 @@ fieldset[disabled] .btn-secondary.active {
22839
23235
  .btn-outline-secondary:not(:disabled, .disabled).active,
22840
23236
  .btn-outline-secondary .show > .dropdown-toggle,
22841
23237
  .open > .dropdown-toggle .btn-outline-secondary {
22842
- color: var(--gray-900, #3b3a48);
22843
- background-color: var(--white, #fff);
22844
- border-color: var(--gray-900, #3b3a48);
23238
+ color: var(--secondary-outline-btn-color-hover, var(--gray-900, #3b3a48));
23239
+ background-color: var(--secondary-outline-btn-bg-hover, var(--white, #fff));
23240
+ border-color: var(
23241
+ --secondary-outline-btn-border-color-hover,
23242
+ var(--gray-900, #3b3a48)
23243
+ );
22845
23244
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22846
23245
  background-image: none;
22847
23246
  }
@@ -22861,19 +23260,25 @@ fieldset[disabled] .btn-outline-secondary:hover,
22861
23260
  fieldset[disabled] .btn-outline-secondary:focus,
22862
23261
  fieldset[disabled] .btn-outline-secondary:active,
22863
23262
  fieldset[disabled] .btn-outline-secondary.active {
22864
- background-color: var(--white, #fff) !important;
22865
- border-color: var(--gray-700, #5e5e6a);
23263
+ background-color: var(
23264
+ --secondary-outline-btn-bg-disabled,
23265
+ var(--secondary-outline-btn-bg, var(--white, #fff))
23266
+ ) !important;
23267
+ border-color: var(
23268
+ --secondary-outline-btn-border-color-disabled,
23269
+ var(--secondary-outline-btn-border-color, var(--gray-700, #5e5e6a))
23270
+ );
22866
23271
  }
22867
23272
 
22868
23273
  /* S1 BUTTON */
22869
23274
  .btn-s1 {
22870
- color: var(--gray-700, #5e5e6a);
22871
- background-color: var(--color-s1, #eef8fb);
22872
- border-color: var(--gray-700, #5e5e6a);
23275
+ color: var(--s1-btn-color, var(--gray-700, #5e5e6a));
23276
+ background-color: var(--s1-btn-bg, var(--color-s1, #eef8fb));
23277
+ border-color: var(--s1-btn-border-color, var(--gray-700, #5e5e6a));
22873
23278
  font-weight: var(--font-weight-6);
22874
23279
 
22875
23280
  &:focus {
22876
- outline: solid 2px var(--outline-default-color) !important;
23281
+ outline: solid 2px var(--outline-s1-btn, var(--outline-default-color)) !important;
22877
23282
  outline-offset: -4px;
22878
23283
  }
22879
23284
 
@@ -22883,7 +23288,10 @@ fieldset[disabled] .btn-outline-secondary.active {
22883
23288
 
22884
23289
  &.active,
22885
23290
  &:disabled {
22886
- color: var(--black, #000);
23291
+ color: var(
23292
+ --s1-btn-color-disabled,
23293
+ var(--s1-btn-color, var(--black, #000))
23294
+ );
22887
23295
  }
22888
23296
 
22889
23297
  .badge {
@@ -22898,9 +23306,9 @@ fieldset[disabled] .btn-outline-secondary.active {
22898
23306
  .btn-s1:not(:disabled, .disabled).active,
22899
23307
  .btn-s1 .show > .dropdown-toggle,
22900
23308
  .open > .dropdown-toggle .btn-s1 {
22901
- color: var(--black, #000);
22902
- background-color: #fff;
22903
- border-color: var(--black, #000);
23309
+ color: var(--s1-btn-color-hover, var(--black, #000));
23310
+ background-color: var(--s1-btn-bg-hover, #fff);
23311
+ border-color: var(--s1-btn-border-color-hover, var(--black, #000));
22904
23312
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22905
23313
  background-image: none;
22906
23314
  }
@@ -22920,8 +23328,14 @@ fieldset[disabled] .btn-s1:hover,
22920
23328
  fieldset[disabled] .btn-s1:focus,
22921
23329
  fieldset[disabled] .btn-s1:active,
22922
23330
  fieldset[disabled] .btn-s1.active {
22923
- background-color: var(--color-s1, #eef8fb) !important;
22924
- border-color: var(--gray-700, #5e5e6a);
23331
+ background-color: var(
23332
+ --s1-btn-bg-disabled,
23333
+ var(--s1-btn-bg, var(--color-s1, #eef8fb))
23334
+ ) !important;
23335
+ border-color: var(
23336
+ --s1-btn-border-color-disabled,
23337
+ var(--s1-btn-border-color, var(--gray-700, #5e5e6a))
23338
+ );
22925
23339
  }
22926
23340
 
22927
23341
  /* LIGHT BUTTON */
@@ -22932,7 +23346,7 @@ fieldset[disabled] .btn-s1.active {
22932
23346
  font-weight: var(--font-weight-6);
22933
23347
 
22934
23348
  &:focus {
22935
- outline: solid 2px var(--outline-default-color) !important;
23349
+ outline: solid 2px var(--outline-light-btn, var(--outline-default-color)) !important;
22936
23350
  outline-offset: -4px;
22937
23351
  }
22938
23352
 
@@ -22970,19 +23384,20 @@ fieldset[disabled] .btn-light:hover,
22970
23384
  fieldset[disabled] .btn-light:focus,
22971
23385
  fieldset[disabled] .btn-light:active,
22972
23386
  fieldset[disabled] .btn-light.active {
22973
- background-color: var(--white, #fff) !important;
22974
- border-color: var(--white, #fff);
23387
+ background-color: var(--light-btn-bg-disabled, var(--white, #fff)) !important;
23388
+ border-color: var(--light-btn-border-color-disabled, var(--white, #fff));
22975
23389
  }
22976
23390
 
22977
23391
  /* LIGHT OUTLINE BUTTON */
22978
23392
  .btn-outline-light {
22979
- color: var(--white, #fff);
22980
- background-color: transparent;
22981
- border-color: var(--white, #fff);
23393
+ color: var(--light-outline-btn-color, var(--white, #fff));
23394
+ background-color: var(--light-outline-btn-bg, transparent);
23395
+ border-color: var(--light-outline-btn-border-color, var(--white, #fff));
22982
23396
  font-weight: var(--font-weight-6);
22983
23397
 
22984
23398
  &:focus {
22985
- outline: solid 2px var(--outline-dark-mode-color) !important;
23399
+ outline: solid 2px
23400
+ var(--outline-light-outline-btn, var(--outline-dark-mode-color)) !important;
22986
23401
  outline-offset: -4px;
22987
23402
  }
22988
23403
 
@@ -22998,9 +23413,12 @@ fieldset[disabled] .btn-light.active {
22998
23413
  .btn-outline-light:not(:disabled, .disabled).active,
22999
23414
  .btn-outline-light .show > .dropdown-toggle,
23000
23415
  .open > .dropdown-toggle .btn-outline-light {
23001
- color: var(--gray-100, #f3f3f4);
23002
- background-color: transparent;
23003
- border-color: var(--gray-100, #f3f3f4);
23416
+ color: var(--light-outline-btn-color-hover, var(--gray-100, #f3f3f4));
23417
+ background-color: var(--light-outline-btn-bg-hover, transparent);
23418
+ border-color: var(
23419
+ --light-outline-btn-border-color-hover,
23420
+ var(--gray-100, #f3f3f4)
23421
+ );
23004
23422
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
23005
23423
  background-image: none;
23006
23424
  }
@@ -23020,8 +23438,14 @@ fieldset[disabled] .btn-outline-light:hover,
23020
23438
  fieldset[disabled] .btn-outline-light:focus,
23021
23439
  fieldset[disabled] .btn-outline-light:active,
23022
23440
  fieldset[disabled] .btn-outline-light.active {
23023
- background-color: transparent !important;
23024
- border-color: var(--white, #fff);
23441
+ background-color: var(
23442
+ --light-outline-btn-bg-disabled,
23443
+ var(--light-outline-btn-bg, transparent)
23444
+ ) !important;
23445
+ border-color: var(
23446
+ --light-outline-btn-border-color-disabled,
23447
+ var(--light-outline-btn-border-color, var(--white, #fff))
23448
+ );
23025
23449
  }
23026
23450
 
23027
23451
  /* BUTTON MORE */
@@ -23191,52 +23615,55 @@ fieldset[disabled] .btn-more {
23191
23615
  }
23192
23616
 
23193
23617
  .btn-default.btn-hover:hover {
23194
- background-color: var(--white, #fff);
23618
+ background-color: var(--btn-hover-default-bg, var(--white, #fff));
23195
23619
  overflow: hidden;
23196
23620
  }
23197
23621
 
23198
23622
  .btn-default.btn-hover::before {
23199
- background: var(--gray-50, #fafafa);
23623
+ background: var(--btn-hover-default-overlay, var(--gray-50, #fafafa));
23200
23624
  overflow: hidden;
23201
23625
  }
23202
23626
 
23203
23627
  .btn-primary.btn-hover:hover {
23204
- background-color: var(--color-p2, #046b99);
23628
+ background-color: var(--btn-hover-primary-bg, var(--color-p2, #046b99));
23205
23629
  overflow: hidden;
23206
23630
  }
23207
23631
 
23208
23632
  .btn-primary.btn-hover::before {
23209
- background: var(--color-p2-darker, #214a68);
23633
+ background: var(--btn-hover-primary-overlay, var(--color-p2-darker, #214a68));
23210
23634
  overflow: hidden;
23211
23635
  }
23212
23636
 
23213
23637
  .btn-highlight.btn-hover:hover {
23214
- background-color: var(--color-p1, #fdb81e);
23638
+ background-color: var(--btn-hover-highlight-bg, var(--color-p1, #fdb81e));
23215
23639
  overflow: hidden;
23216
23640
  }
23217
23641
 
23218
23642
  .btn-highlight.btn-hover::before {
23219
- background: var(--color-p1-light, #f2c45a);
23643
+ background: var(
23644
+ --btn-hover-highlight-overlay,
23645
+ var(--color-p1-light, #f2c45a)
23646
+ );
23220
23647
  overflow: hidden;
23221
23648
  }
23222
23649
 
23223
23650
  .btn-standout.btn-hover:hover {
23224
- background-color: var(--color-p3, #323a45);
23651
+ background-color: var(--btn-hover-standout-bg, var(--color-p3, #323a45));
23225
23652
  overflow: hidden;
23226
23653
  }
23227
23654
 
23228
23655
  .btn-standout.btn-hover::before {
23229
- background: var(--color-p3-light, #525760);
23656
+ background: var(--btn-hover-standout-overlay, var(--color-p3-light, #525760));
23230
23657
  overflow: hidden;
23231
23658
  }
23232
23659
 
23233
23660
  .btn-secondary.btn-hover:hover {
23234
- background-color: var(--gray-50, #fafafa);
23661
+ background-color: var(--btn-hover-secondary-bg, var(--gray-50, #fafafa));
23235
23662
  overflow: hidden;
23236
23663
  }
23237
23664
 
23238
23665
  .btn-secondary.btn-hover::before {
23239
- background: var(--white, #fff);
23666
+ background: var(--btn-hover-secondary-overlay, var(--white, #fff));
23240
23667
  overflow: hidden;
23241
23668
  }
23242
23669
 
@@ -23246,7 +23673,7 @@ fieldset[disabled] .btn-more {
23246
23673
  }
23247
23674
 
23248
23675
  .btn-outline-primary.btn-hover::before {
23249
- background: var(--gray-50, #fafafa);
23676
+ background: var(--btn-hover-primary-overlay, var(--gray-50, #fafafa));
23250
23677
  overflow: hidden;
23251
23678
  }
23252
23679
 
@@ -23256,7 +23683,7 @@ fieldset[disabled] .btn-more {
23256
23683
  }
23257
23684
 
23258
23685
  .btn-outline-standout.btn-hover::before {
23259
- background: var(--gray-50, #fafafa);
23686
+ background: var(--btn-hover-standout-overlay, var(--gray-50, #fafafa));
23260
23687
  overflow: hidden;
23261
23688
  }
23262
23689
 
@@ -23266,7 +23693,7 @@ fieldset[disabled] .btn-more {
23266
23693
  }
23267
23694
 
23268
23695
  .btn-outline-secondary.btn-hover::before {
23269
- background: var(--gray-50, #fafafa);
23696
+ background: var(--btn-hover-secondary-overlay, var(--gray-50, #fafafa));
23270
23697
  overflow: hidden;
23271
23698
  }
23272
23699
 
@@ -23340,6 +23767,42 @@ fieldset[disabled] .btn-more {
23340
23767
  .btn-block {
23341
23768
  white-space: normal;
23342
23769
  }
23770
+ /* -----------------------------------------
23771
+ EXTERNAL LINKS
23772
+ /src/css/cagov/external-link.css
23773
+ ----------------------------------------- */
23774
+
23775
+ :root {
23776
+ --cagov-external-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3h7v7h-2V7l-9 9-2-2 9-9H14V3M5 5h5V3H5c-1 0-2 1-2 2v14c0 1 1 2 2 2h14c1 0 2-1 2-2v-5h-2v5H5V5'/></svg>");
23777
+ }
23778
+
23779
+ a.cagov-external-link {
23780
+ position: relative;
23781
+
23782
+ &::after {
23783
+ content: "";
23784
+ display: inline-block;
23785
+ width: 0.9em;
23786
+ height: 0.9em;
23787
+ margin-left: 0.25em;
23788
+
23789
+ /* Icon color follows the link text color */
23790
+ background-color: currentColor;
23791
+ vertical-align: text-bottom;
23792
+
23793
+ /* Safari 13.1 requires prefixed mask properties */
23794
+ -webkit-mask-image: var(--cagov-external-icon);
23795
+ -webkit-mask-repeat: no-repeat;
23796
+ -webkit-mask-size: 100% 100%;
23797
+ -webkit-mask-position: center;
23798
+
23799
+ /* Standard mask */
23800
+ mask-image: var(--cagov-external-icon);
23801
+ mask-repeat: no-repeat;
23802
+ mask-size: 100% 100%;
23803
+ mask-position: center;
23804
+ }
23805
+ }
23343
23806
  /* -----------------------------------------
23344
23807
  Number Counter
23345
23808
  ----------------------------------------- */
@@ -23369,7 +23832,7 @@ fieldset[disabled] .btn-more {
23369
23832
  margin-top: 0;
23370
23833
  font-weight: 700;
23371
23834
  line-height: 1.1;
23372
- border-left: 3px solid #fff;
23835
+ border-left: 3px solid var(--body-bg, var(--white, #fff));
23373
23836
  }
23374
23837
 
23375
23838
  .countdown-text {
@@ -23383,10 +23846,10 @@ fieldset[disabled] .btn-more {
23383
23846
  .page-navigation {
23384
23847
  margin-bottom: 1.5rem;
23385
23848
  padding-bottom: 0.75rem;
23386
- border-bottom: 1px solid var(--gray-200, #d4d4d7);
23849
+ border-bottom: 1px solid var(--border-color-default, var(--gray-200, #d4d4d7));
23387
23850
 
23388
23851
  .label {
23389
- color: var(--gray-700, #5e5e6a);
23852
+ color: var(--text-muted, var(--gray-700, #5e5e6a));
23390
23853
  font-weight: var(--font-weight-7);
23391
23854
  font-size: calc(var(--font-size-regular) + var(--ratio));
23392
23855
  line-height: var(--font-lineheight-5);
@@ -23395,7 +23858,7 @@ fieldset[disabled] .btn-more {
23395
23858
  padding-bottom: 0;
23396
23859
  }
23397
23860
 
23398
- ul {
23861
+ & ul {
23399
23862
  margin: 0;
23400
23863
  text-indent: 0;
23401
23864
  padding: 0;
@@ -23408,14 +23871,14 @@ fieldset[disabled] .btn-more {
23408
23871
  columns: 3;
23409
23872
  }
23410
23873
 
23411
- li {
23874
+ & li {
23412
23875
  list-style: none;
23413
23876
  padding: 0;
23414
23877
  margin: 0;
23415
23878
  margin-bottom: 0.3rem;
23416
23879
  font-size: calc(var(--font-size-base) + var(--ratio));
23417
23880
 
23418
- a {
23881
+ & a {
23419
23882
  display: inline-block;
23420
23883
  position: relative;
23421
23884
  padding-left: 1.5rem;
@@ -23442,6 +23905,11 @@ fieldset[disabled] .btn-more {
23442
23905
  /* -----------------------------------------
23443
23906
  PROGRESS BAR - /src/css/cagov/progress-bar.css
23444
23907
  ----------------------------------------- */
23908
+
23909
+ .progress {
23910
+ background-color: var(--default-bg-darker, #d4d4d7);
23911
+ }
23912
+
23445
23913
  .progress-pointer {
23446
23914
  position: absolute;
23447
23915
  bottom: 100%;
@@ -23753,12 +24221,12 @@ fieldset[disabled] .btn-more {
23753
24221
  text-align: left;
23754
24222
  position: relative;
23755
24223
 
23756
- p,
23757
- h2,
23758
- h3,
23759
- h4,
23760
- h5,
23761
- h6 {
24224
+ & p,
24225
+ & h2,
24226
+ & h3,
24227
+ & h4,
24228
+ & h5,
24229
+ & h6 {
23762
24230
  margin-left: 3rem !important;
23763
24231
  }
23764
24232
  }
@@ -23784,7 +24252,7 @@ fieldset[disabled] .btn-more {
23784
24252
  margin-top: 0;
23785
24253
  margin-bottom: 0;
23786
24254
  padding-left: 2rem;
23787
- border-left: 1px solid #ddd;
24255
+ border-left: 1px solid var(--border-color-default, #d4d4d7);
23788
24256
  }
23789
24257
 
23790
24258
  .dot-text h3 {
@@ -23798,7 +24266,7 @@ fieldset[disabled] .btn-more {
23798
24266
 
23799
24267
  .timeline-lines .col-sm-3:nth-last-of-type(2) .dot-text::before,
23800
24268
  .timeline-lines .col-sm-3:last-of-type .dot-text::before {
23801
- background: #ddd;
24269
+ background: var(--border-color-default, #d4d4d7);
23802
24270
  }
23803
24271
  }
23804
24272
 
@@ -24033,14 +24501,16 @@ nav.side-navigation > ul {
24033
24501
  position: relative;
24034
24502
  display: block;
24035
24503
  text-decoration: none !important;
24036
- color: var(--gray-700, #5e5e6a);
24504
+ color: var(--text-muted, var(--gray-700, #5e5e6a));
24037
24505
  padding-bottom: 0.7rem;
24038
24506
  padding-top: 0.7rem;
24039
24507
  padding-left: 1rem;
24040
- border-bottom: 1px solid var(--gray-100, #f3f3f4);
24508
+ border-bottom: 1px solid
24509
+ var(--border-color-muted, var(--gray-100, #f3f3f4));
24041
24510
 
24042
24511
  &.active {
24043
- background-color: var(--gray-75, #f3f3f4);
24512
+ background-color: var(--sidenav-active-bg, var(--gray-75, #f3f3f4));
24513
+ color: var(--sidenav-active-color, inherit);
24044
24514
 
24045
24515
  &::before {
24046
24516
  content: "";
@@ -24056,7 +24526,7 @@ nav.side-navigation > ul {
24056
24526
  }
24057
24527
 
24058
24528
  &:hover {
24059
- color: var(--gray-900, #3b3a48);
24529
+ color: var(--text-color, var(--gray-900, #3b3a48));
24060
24530
  }
24061
24531
 
24062
24532
  /* stylelint-disable-next-line no-descending-specificity */
@@ -24067,11 +24537,14 @@ nav.side-navigation > ul {
24067
24537
 
24068
24538
  &:focus,
24069
24539
  &:hover {
24070
- background-color: var(--gray-50, #fafafa);
24540
+ background-color: var(--sidenav-hover-bg, var(--gray-50, #fafafa));
24071
24541
 
24072
24542
  /* stylelint-disable-next-line no-descending-specificity */
24073
24543
  &.active {
24074
- background-color: var(--gray-100, #f3f3f4);
24544
+ background-color: var(
24545
+ --sidenav-active-hover-bg,
24546
+ var(--gray-100, #f3f3f4)
24547
+ );
24075
24548
  }
24076
24549
  }
24077
24550
 
@@ -24122,11 +24595,11 @@ nav.side-navigation > ul {
24122
24595
  position: relative;
24123
24596
  right: 0;
24124
24597
  padding-right: 2.3rem;
24125
- color: var(--color-p2, #046b99);
24598
+ color: var(--link-color, var(--color-p2, #046b99));
24126
24599
 
24127
24600
  &:hover,
24128
24601
  &:focus {
24129
- color: var(--color-p2-darker, #214a68);
24602
+ color: var(--link-color-hover, var(--color-p2-darker, #214a68));
24130
24603
  }
24131
24604
 
24132
24605
  .ca-gov-icon-caret-down {
@@ -24232,15 +24705,15 @@ a.sidenav {
24232
24705
  padding-left: 1rem;
24233
24706
  position: relative;
24234
24707
  text-decoration: none !important;
24235
- color: var(--gray-700, #5e5e6a);
24236
- border-bottom: 1px solid var(--gray-100, #f3f3f4);
24237
- background-color: var(--white, #fff);
24708
+ color: var(--text-muted, var(--gray-700, #5e5e6a));
24709
+ border-bottom: 1px solid var(--border-color-muted, var(--gray-100, #f3f3f4));
24710
+ background-color: var(--body-bg, var(--white, #fff));
24238
24711
 
24239
24712
  &:hover,
24240
24713
  &:focus {
24241
24714
  text-decoration: none;
24242
- background-color: var(--gray-50, #fafafa);
24243
- color: var(--gray-900, #3b3a48);
24715
+ background-color: var(--sidenav-hover-bg, var(--gray-50, #fafafa));
24716
+ color: var(--text-color, var(--gray-900, #3b3a48));
24244
24717
  }
24245
24718
 
24246
24719
  &:focus {
@@ -24248,15 +24721,18 @@ a.sidenav {
24248
24721
  }
24249
24722
 
24250
24723
  &.active {
24251
- color: var(--gray-700, #5e5e6a);
24724
+ color: var(--sidenav-active-color, var(--gray-700, #5e5e6a));
24252
24725
  text-decoration: none;
24253
- background-color: var(--gray-75, #f3f3f4);
24726
+ background-color: var(--sidenav-active-bg, var(--gray-75, #f3f3f4));
24254
24727
 
24255
24728
  &:hover,
24256
24729
  &:focus {
24257
24730
  text-decoration: none !important;
24258
- color: var(--black, #000);
24259
- background-color: var(--gray-100, #f3f3f4);
24731
+ color: var(--sidenav-active-hover-color, var(--black, #000));
24732
+ background-color: var(
24733
+ --sidenav-active-hover-bg,
24734
+ var(--gray-100, #f3f3f4)
24735
+ );
24260
24736
  }
24261
24737
 
24262
24738
  &::before {
@@ -24541,7 +25017,7 @@ a.sidenav {
24541
25017
  font-size: 1.625rem;
24542
25018
  font-weight: 700;
24543
25019
  border: 5px solid;
24544
- background-color: #fff;
25020
+ background-color: var(--body-bg, #fff);
24545
25021
  border-radius: 50%;
24546
25022
  text-align: center;
24547
25023
  position: absolute;
@@ -24579,7 +25055,7 @@ a.sidenav {
24579
25055
 
24580
25056
  .link-grid {
24581
25057
  display: block;
24582
- border: 1px solid var(--gray-200, #d4d4d7);
25058
+ border: 1px solid var(--border-color-default, #d4d4d7);
24583
25059
  border-radius: 5px;
24584
25060
  font-size: 1.4rem;
24585
25061
  font-weight: 700;
@@ -24587,13 +25063,14 @@ a.sidenav {
24587
25063
  position: relative;
24588
25064
  text-decoration: none !important;
24589
25065
  height: 100%;
24590
- color: var(--color-p2, #046b99);
24591
- border-bottom: 4px solid var(--color-p2, #046b99);
25066
+ color: var(--link-grid-color, var(--color-p2, #046b99));
25067
+ border-bottom: 4px solid
25068
+ var(--link-grid-border-bottom-color, var(--color-p2, #046b99));
24592
25069
 
24593
25070
  &:hover,
24594
25071
  &:focus {
24595
- background: var(--gray-100, #f3f3f4);
24596
- color: var(--color-p2-darker, #214a68);
25072
+ background: var(--link-grid-hover-bg, var(--gray-100, #f3f3f4));
25073
+ color: var(--link-grid-hover-color, var(--color-p2-darker, #214a68));
24597
25074
  }
24598
25075
 
24599
25076
  &:focus {
@@ -24607,8 +25084,8 @@ a.sidenav {
24607
25084
  text-decoration: none;
24608
25085
  width: 0.55rem;
24609
25086
  height: 0.55rem;
24610
- border-top: 2px solid var(--color-p2, #046b99);
24611
- border-left: 2px solid var(--color-p2, #046b99);
25087
+ border-top: 2px solid var(--link-grid-color, var(--color-p2, #046b99));
25088
+ border-left: 2px solid var(--link-grid-color, var(--color-p2, #046b99));
24612
25089
  vertical-align: middle;
24613
25090
  top: 50%;
24614
25091
  transform: translateY(-50%) rotate(135deg);
@@ -25147,7 +25624,7 @@ a.sidenav {
25147
25624
 
25148
25625
  .color-gray-dark,
25149
25626
  .color-grey-dark {
25150
- color: var(--gray-900, #3b3a48);
25627
+ color: var(--text-color, var(--gray-900, #3b3a48));
25151
25628
  }
25152
25629
 
25153
25630
  .color-gray,
@@ -25155,6 +25632,15 @@ a.sidenav {
25155
25632
  color: var(--gray-700, #5e5e6a);
25156
25633
  }
25157
25634
 
25635
+ .color-muted {
25636
+ color: var(--text-muted, var(--gray-700, #5e5e6a)) !important;
25637
+ }
25638
+
25639
+ .color-muted-hover:hover,
25640
+ .color-muted-hover:focus {
25641
+ color: var(--text-color, var(--gray-900, #3b3a48)) !important;
25642
+ }
25643
+
25158
25644
  .gray-50,
25159
25645
  .gray-50-hover:hover,
25160
25646
  .gray-50-hover:focus {
@@ -25227,6 +25713,24 @@ a.sidenav {
25227
25713
  color: var(--gray-50, #fafafa) !important;
25228
25714
  }
25229
25715
 
25716
+ .text-color {
25717
+ color: var(--text-color, #3b3a48) !important;
25718
+ }
25719
+
25720
+ .text-color-hover:hover,
25721
+ .text-color-hover:focus {
25722
+ color: var(--text-color-hover, #000) !important;
25723
+ }
25724
+
25725
+ .link-color {
25726
+ color: var(--link-color, var(--color-p2, #046b99)) !important;
25727
+ }
25728
+
25729
+ .link-color-hover:hover,
25730
+ .link-color-hover:focus {
25731
+ color: var(--link-color-hover, var(--color-p2-darker, #035376)) !important;
25732
+ }
25733
+
25230
25734
  .text-primary {
25231
25735
  color: var(--color-p2, #046b99) !important;
25232
25736
  }
@@ -25253,57 +25757,94 @@ a.sidenav {
25253
25757
  color: var(--brand-danger, #cd402d) !important;
25254
25758
  }
25255
25759
 
25760
+ .bg-base-light {
25761
+ background-color: var(--base-light, #fff) !important;
25762
+ }
25763
+
25764
+ .bg-body {
25765
+ background-color: var(--body-bg, #fff) !important;
25766
+ }
25767
+
25768
+ .bg-base-light-hover:hover,
25769
+ .bg-base-light-hover:focus {
25770
+ background-color: var(--base-light, #fff) !important;
25771
+ }
25772
+
25256
25773
  .bg-white {
25257
25774
  background-color: var(--white, #fff) !important;
25258
25775
  }
25259
25776
 
25777
+ .bg-white-hover:hover,
25778
+ .bg-white-hover:focus {
25779
+ background-color: var(--white, #fff) !important;
25780
+ }
25781
+
25782
+ .bg-default {
25783
+ background-color: var(--default-bg, var(--gray-50, #fafafa)) !important;
25784
+ }
25785
+
25786
+ .bg-default-hover:hover,
25787
+ .bg-default-hover:focus {
25788
+ background-color: var(--default-bg-hover, var(--gray-75, #f3f3f4)) !important;
25789
+ }
25790
+
25791
+ .bg-default-hover-darker:hover,
25792
+ .bg-default-hover-darker:focus {
25793
+ background-color: var(
25794
+ --default-bg-hover-darker,
25795
+ var(--gray-100, #ededef)
25796
+ ) !important;
25797
+ }
25798
+
25260
25799
  .bg-outline-color,
25261
25800
  .bg-outline-color:hover,
25262
25801
  .bg-outline-color:focus {
25263
25802
  background-color: var(--outline-default-color, #2ea3f2) !important;
25264
25803
  }
25265
25804
 
25266
- .bg-white-hover:hover,
25267
- .bg-white-hover:focus {
25268
- background-color: var(--white, #fff) !important;
25269
- }
25270
-
25271
25805
  .bg-gray-light,
25272
25806
  .bg-grey-light {
25273
- background-color: var(--gray-100, #ededef) !important;
25807
+ background-color: var(
25808
+ --default-bg-darker,
25809
+ var(--gray-100, #ededef)
25810
+ ) !important;
25274
25811
  }
25275
25812
 
25276
25813
  .bg-gray-light-hover:hover,
25277
25814
  .bg-gray-light-hover:focus,
25278
25815
  .bg-grey-light-hover:hover,
25279
25816
  .bg-grey-light-hover:focus {
25280
- background-color: var(--gray-100, #ededef) !important;
25817
+ background-color: var(
25818
+ --default-bg-darker,
25819
+ var(--gray-100, #ededef)
25820
+ ) !important;
25281
25821
  }
25282
25822
 
25283
25823
  .bg-gray-light-hover-darker:hover,
25284
25824
  .bg-gray-light-hover-darker:focus,
25285
25825
  .bg-grey-light-hover-darker:hover,
25286
25826
  .bg-grey-light-hover-darker:focus {
25287
- background-color: var(--gray-200, #d4d4d7) !important;
25827
+ background-color: var(
25828
+ --border-color-default,
25829
+ var(--gray-200, #d4d4d7)
25830
+ ) !important;
25288
25831
  }
25289
25832
 
25290
- .bg-gray-lightest,
25291
- .bg-grey-lightest {
25292
- background-color: var(--gray-50, #fafafa) !important;
25833
+ .bg-gray-lighter,
25834
+ .bg-grey-lighter {
25835
+ background-color: var(--default-bg-hover, var(--gray-75, #f3f3f4)) !important;
25293
25836
  }
25294
25837
 
25295
- .bg-gray-lightest-hover:hover,
25296
- .bg-gray-lightest-hover:focus,
25297
- .bg-grey-lightest-hover:hover,
25298
- .bg-grey-lightest-hover:focus {
25299
- background-color: var(--gray-50, #fafafa) !important;
25838
+ .bg-gray-lightest,
25839
+ .bg-grey-lightest {
25840
+ background-color: var(--default-bg, var(--gray-50, #fafafa)) !important;
25300
25841
  }
25301
25842
 
25302
25843
  .bg-gray-lightest-hover-darker:hover,
25303
25844
  .bg-gray-lightest-hover-darker:focus,
25304
25845
  .bg-grey-lightest-hover-darker:hover,
25305
25846
  .bg-grey-lightest-hover-darker:focus {
25306
- background-color: var(--gray-75, #f3f3f4) !important;
25847
+ background-color: var(--default-bg-hover, var(--gray-75, #f3f3f4)) !important;
25307
25848
  }
25308
25849
 
25309
25850
  .bg-gray-50,
@@ -25372,6 +25913,15 @@ a.sidenav {
25372
25913
  background-color: var(--gray-900, #3b3a48) !important;
25373
25914
  }
25374
25915
 
25916
+ .bg-base-dark {
25917
+ background-color: var(--base-dark, #000) !important;
25918
+ }
25919
+
25920
+ .bg-base-dark-hover:hover,
25921
+ .bg-base-dark-hover:focus {
25922
+ background-color: var(--base-dark, #000) !important;
25923
+ }
25924
+
25375
25925
  .bg-none {
25376
25926
  background: none !important;
25377
25927
  }
@@ -25413,30 +25963,30 @@ a.sidenav {
25413
25963
  ------------------------------------ */
25414
25964
  .brd-white-before::before,
25415
25965
  .brd-white-after::after {
25416
- border-color: var(--white, #fff) !important;
25966
+ border-color: var(--base-light, var(--white, #fff)) !important;
25417
25967
  }
25418
25968
 
25419
25969
  .brd-gray-light,
25420
25970
  .brd-gray-light-hover:hover,
25421
25971
  .brd-gray-light-hover:focus {
25422
- border-color: var(--card-border-color, #ddd) !important;
25972
+ border-color: var(--border-color-default, #d4d4d7) !important;
25423
25973
  }
25424
25974
 
25425
25975
  .brd-gray-dark,
25426
25976
  .brd-gray-dark-hover:hover,
25427
25977
  .brd-gray-dark-hover:focus {
25428
- border-color: var(--gray-900, #3b3a48) !important;
25978
+ border-color: var(--text-color, var(--gray-900, #3b3a48)) !important;
25429
25979
  }
25430
25980
 
25431
25981
  .brd-gray,
25432
25982
  .brd-gray-hover:hover,
25433
25983
  .brd-gray-hover:focus {
25434
- border-color: var(--gray-700, #5e5e6a) !important;
25984
+ border-color: var(--text-muted, var(--gray-700, #5e5e6a)) !important;
25435
25985
  }
25436
25986
 
25437
25987
  .brd-gray-light-before::before,
25438
25988
  .brd-gray-light-after::after {
25439
- border-color: var(--card-border-color, #ddd) !important;
25989
+ border-color: var(--border-color-default, #d4d4d7) !important;
25440
25990
  }
25441
25991
 
25442
25992
  .brd-transparent-before::before,
@@ -25444,6 +25994,17 @@ a.sidenav {
25444
25994
  border-color: transparent !important;
25445
25995
  }
25446
25996
 
25997
+ .brd-color-default {
25998
+ border-color: var(
25999
+ --border-color-default,
26000
+ var(--gray-200, #d4d4d7)
26001
+ ) !important;
26002
+ }
26003
+
26004
+ .brd-color-muted {
26005
+ border-color: var(--border-color-muted, var(--gray-100, #f3f3f4)) !important;
26006
+ }
26007
+
25447
26008
  .brd-gray-100 {
25448
26009
  border-color: var(--gray-100, #f3f3f4) !important;
25449
26010
  }
@@ -26174,14 +26735,22 @@ a.sidenav {
26174
26735
  color: var(--color-p1-light, #f2c45a) !important;
26175
26736
  }
26176
26737
 
26177
- .color-primary,
26178
26738
  .color-p2 {
26179
- color: var(--color-p2, #046b99);
26739
+ color: var(--color-p2, #046b99) !important;
26740
+ }
26741
+
26742
+ .color-p2-hover:hover,
26743
+ .color-p2-hover:focus {
26744
+ color: var(--color-p2-darker, #214a68) !important;
26745
+ }
26746
+
26747
+ .color-primary {
26748
+ color: var(--link-color, var(--color-p2, #046b99)) !important;
26180
26749
  }
26181
26750
 
26182
26751
  .color-primary-hover:hover,
26183
26752
  .color-primary-hover:focus {
26184
- color: var(--color-p2-darker, #214a68) !important;
26753
+ color: var(--link-color-hover, var(--color-p2-darker, #214a68)) !important;
26185
26754
  }
26186
26755
 
26187
26756
  .color-standout,
@@ -26291,12 +26860,18 @@ a.sidenav {
26291
26860
  }
26292
26861
 
26293
26862
  .bg-primary-light {
26294
- background-color: var(--color-p2-lightest, #a4c3d4) !important;
26863
+ background-color: var(
26864
+ --color-primary-light,
26865
+ var(--color-p2-lightest, #a4c3d4)
26866
+ ) !important;
26295
26867
  }
26296
26868
 
26297
26869
  .bg-primary-light-hover:hover,
26298
26870
  .bg-primary-light-hover:focus {
26299
- background-color: var(--color-p2-lightest, #a4c3d4) !important;
26871
+ background-color: var(
26872
+ --color-primary-light,
26873
+ var(--color-p2-lightest, #a4c3d4)
26874
+ ) !important;
26300
26875
  }
26301
26876
 
26302
26877
  .bg-highlight-light {
@@ -26348,15 +26923,21 @@ a.sidenav {
26348
26923
 
26349
26924
  /* border colors */
26350
26925
  .brd-primary {
26351
- border-color: var(--color-p2, #046b99) !important;
26926
+ border-color: var(--color-primary, var(--color-p2, #046b99)) !important;
26352
26927
  }
26353
26928
 
26354
26929
  .brd-primary-light {
26355
- border-color: var(--color-p2-lightest, #a4c3d4) !important;
26930
+ border-color: var(
26931
+ --color-primary-light,
26932
+ var(--color-p2-lightest, #a4c3d4)
26933
+ ) !important;
26356
26934
  }
26357
26935
 
26358
26936
  .brd-primary-dark {
26359
- border-color: var(--color-p2-darker, #214a68) !important;
26937
+ border-color: var(
26938
+ --color-primary-dark,
26939
+ var(--color-p2-darker, #214a68)
26940
+ ) !important;
26360
26941
  }
26361
26942
 
26362
26943
  .brd-standout {
@@ -26397,7 +26978,10 @@ a.sidenav {
26397
26978
 
26398
26979
  .brd-primary-light-before::before,
26399
26980
  .brd-primary-light-after::after {
26400
- border-color: var(--color-p2-lightest, #a4c3d4) !important;
26981
+ border-color: var(
26982
+ --color-primary-light,
26983
+ var(--color-p2-lightest, #a4c3d4)
26984
+ ) !important;
26401
26985
  }
26402
26986
 
26403
26987
  .brd-highlight-light-before::before,