@utahdts/utah-design-system 4.3.0 → 5.0.1

package/dist/style.css

@@ -350,10 +350,40 @@ variables and settings
 ############     _font-size.scss      ############
 Font size variables
 */
+@font-face {
+  font-family: "UT Industry";
+  src: url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Regular.woff2") format("woff2"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Regular.woff") format("woff"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/otf/UTIndustry-Regular.otf") format("opentype"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: "UT Industry";
+  src: url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Medium.woff2") format("woff2"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Medium.woff") format("woff"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/otf/UTIndustry-Medium.otf") format("opentype"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: "UT Industry";
+  src: url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Bold.woff2") format("woff2"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Bold.woff") format("woff"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/otf/UTIndustry-Bold.otf") format("opentype"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: "UT Industry";
+  src: url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Heavy.woff2") format("woff2"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Heavy.woff") format("woff"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/otf/UTIndustry-Heavy.otf") format("opentype"), url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Heavy.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: block;
+}
+:root {
+  --ut-industry-font-family: 'UT Industry', Georgia, serif;
+}
 .utah-design-system {
   --normal-font-family: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Helvetica, sans-serif;
   --fixed-width-font-family: 'Source Code Pro', monospace;
-  --font-size-2xs: .8125rem;
   --font-size-xs: .875rem;
   --font-size-s: .9375rem;
   --font-size: 1rem;
@@ -373,9 +403,6 @@ Font size variables
   --font-weight-bold: 700;
   --font-weight-black: 900;
 }
-.utah-design-system .font-size-2xs {
-  font-size: var(--font-size-2xs);
-}
 .utah-design-system .font-size-xs {
   font-size: var(--font-size-xs);
 }
@@ -435,6 +462,9 @@ Font size variables
 base color swatches for the design system
 */
 /*
+branding colors
+*/
+/*
 ############     _settings-index.scss      ############
 variables and settings
 */
@@ -740,26 +770,95 @@ variables and settings
 ############     _media-size-vars.scss      ############
 Media Sizes - SCSS Variables
 */
+:root {
+  /* ######## ---------- Branding --------- ######## */
+  --utah-brand-primary-color-blue-dark: #071D49;
+  --utah-brand-primary-color-blue-medium: #093692;
+  --utah-brand-primary-color-blue-light: #81D0F0;
+  --utah-brand-primary-color-gold-light: #FFB81D;
+  --utah-brand-primary-color-gold-medium: #FF8C03;
+  --utah-brand-primary-color-red: #AA0200;
+  --utah-brand-secondary-color-clay-00: #E9DCC8;
+  --utah-brand-secondary-color-clay-01: #C0B1A1;
+  --utah-brand-secondary-color-clay-02: #9C837E;
+  --utah-brand-secondary-color-clay-03: #78555A;
+  --utah-brand-secondary-color-clay-04: #52393B;
+  --utah-brand-secondary-color-clay-05: #2C1E1B;
+  --utah-brand-secondary-color-green-00: #C6D0BE;
+  --utah-brand-secondary-color-green-01: #94AF87;
+  --utah-brand-secondary-color-green-02: #4A9044;
+  --utah-brand-secondary-color-green-03: #007000;
+  --utah-brand-secondary-color-green-04: #1C4C10;
+  --utah-brand-secondary-color-green-05: #092908;
+  --utah-brand-secondary-color-teal-00: #A6C4CA;
+  --utah-brand-secondary-color-teal-01: #79B1B1;
+  --utah-brand-secondary-color-teal-02: #3D9992;
+  --utah-brand-secondary-color-teal-03: #008072;
+  --utah-brand-secondary-color-teal-04: #165857;
+  --utah-brand-secondary-color-teal-05: #0D262E;
+  --utah-brand-secondary-color-blue-00: #C1CFE7;
+  --utah-brand-secondary-color-blue-01: #89A4D4;
+  --utah-brand-secondary-color-blue-02: #467EC8;
+  --utah-brand-secondary-color-blue-03: #0258BB;
+  --utah-brand-secondary-color-blue-04: #103982;
+  --utah-brand-secondary-color-blue-05: #0E1C3B;
+  --utah-brand-secondary-color-violet-00: #D6CEDF;
+  --utah-brand-secondary-color-violet-01: #9F8DB4;
+  --utah-brand-secondary-color-violet-02: #7259AA;
+  --utah-brand-secondary-color-violet-03: #3F1EAD;
+  --utah-brand-secondary-color-violet-04: #301C5C;
+  --utah-brand-secondary-color-violet-05: #1F0A45;
+  --utah-brand-secondary-color-raspberry-00: #D0A7BB;
+  --utah-brand-secondary-color-raspberry-01: #C9829E;
+  --utah-brand-secondary-color-raspberry-02: #C24177;
+  --utah-brand-secondary-color-raspberry-03: #BA004F;
+  --utah-brand-secondary-color-raspberry-04: #870746;
+  --utah-brand-secondary-color-raspberry-05: #530D3C;
+  --utah-brand-secondary-color-red-00: #E1ACA1;
+  --utah-brand-secondary-color-red-01: #DF897D;
+  --utah-brand-secondary-color-red-02: #FF5D5F;
+  --utah-brand-secondary-color-red-03: #E70015;
+  --utah-brand-secondary-color-red-04: #9B1B15;
+  --utah-brand-secondary-color-red-05: #61100A;
+  --utah-brand-secondary-color-orange-00: #E9C997;
+  --utah-brand-secondary-color-orange-01: #E5A873;
+  --utah-brand-secondary-color-orange-02: #E37D49;
+  --utah-brand-secondary-color-orange-03: #E2521F;
+  --utah-brand-secondary-color-orange-04: #A34818;
+  --utah-brand-secondary-color-orange-05: #633D11;
+  --utah-brand-secondary-color-yellow-00: #FAFAD4;
+  --utah-brand-secondary-color-yellow-01: #F8FAAF;
+  --utah-brand-secondary-color-yellow-02: #F5FA7D;
+  --utah-brand-secondary-color-yellow-03: #F2FA00;
+  --utah-brand-secondary-color-yellow-04: #CBB60C;
+  --utah-brand-secondary-color-yellow-05: #A47217;
+  /* ######## --------------------------------------------- ######## */
+}
 .utah-design-system {
   /* color */
   /* ######## Pick these colors to match your desired style ######## */
-  --primary-color: #b2441e;
-  --primary-color-dark: #71321c;
-  --primary-color-light: #f9f0ed;
-  --gray-on-primary-color: #474747;
-  --secondary-color: #1f89ad;
-  --secondary-color-dark: #27424b;
-  --secondary-color-light: #edf5f8;
+  --primary-color: var(--utah-brand-primary-color-blue-medium);
+  --primary-color-dark: var(--utah-brand-primary-color-blue-dark);
+  --primary-color-light: var(--utah-brand-primary-color-blue-light);
+  --gray-on-primary-color: white;
+  --secondary-color: var(--utah-brand-secondary-color-teal-03);
+  --secondary-color-dark: var(--utah-brand-secondary-color-teal-05);
+  --secondary-color-light: var(--utah-brand-secondary-color-teal-00);
   --gray-on-secondary-color: #474747;
-  --accent-color: #ffb612;
-  --accent-color-dark: #463d29;
-  --accent-color-light: #fff9ec;
+  --accent-color: var(--utah-brand-primary-color-gold-light);
+  --accent-color-dark: var(--utah-brand-primary-color-gold-medium);
+  --accent-color-light: var(--utah-brand-secondary-color-yellow-00);
   --gray-on-accent-color: #474747;
   --form-ele-color: #2765e4;
   --form-ele-color-light: #9bb8f2;
+  --form-ele-color-dark: #234b9e;
   --form-ele-disabled-color: #949494;
   --form-ele-placeholder-color: #757575;
-  /* ######## --------------------------------------------- ######## */
+  --header-primary-color: var(--primary-color);
+  --header-primary-color-dark: var(--primary-color-dark);
+  --header-title-color: var(--utah-brand-primary-color-blue-dark);
+  --notifications-drawer-color: var(--form-ele-color);
+  --notifications-drawer-color-dark: var(--form-ele-color-dark);
   --gray-color: #474747;
   --gray-medium-color: #616161;
   --gray-3-1-contrast: #949494;
@@ -1562,7 +1661,7 @@ component specific, BEM (Block, Element, Modifier)
   display: inline-block;
   height: 100%;
   overflow-y: auto;
-  padding: var(--spacing);
+  padding: 0;
 }
 .utah-design-system .drawer__inner.drawer--right {
   animation: 200ms ease-in-out 100ms right-in both;
@@ -1641,6 +1740,9 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .tab-group__panel--selected {
   display: block;
 }
+.utah-design-system .tab-group__panel:focus-visible {
+  outline-offset: 2px;
+}
 .utah-design-system .tab-group--vertical {
   display: flex;
 }
@@ -2568,6 +2670,7 @@ component specific, BEM (Block, Element, Modifier)
 }
 .utah-design-system .search-input__wrapper input[type=text] {
   border-radius: var(--radius-circle);
+  margin: 0;
   padding: var(--spacing-s) 170px var(--spacing-s) var(--spacing-3xl);
 }
 .utah-design-system .search-input__button-wrapper {
@@ -3429,6 +3532,9 @@ component specific, BEM (Block, Element, Modifier)
   position: relative;
   z-index: 2500;
 }
+.utah-design-system.main-menu__outer:has(.popup__wrapper:not(.popup__wrapper--hidden)) {
+  z-index: 4000;
+}
 .utah-design-system .main-menu__wrapper {
   background-color: var(--gray-light-color);
   display: flex;
@@ -3463,7 +3569,7 @@ component specific, BEM (Block, Element, Modifier)
   padding: var(--spacing-3xs) var(--spacing);
   margin: var(--spacing-xs) 0;
   border-radius: 999px;
-  transition: all var(--timing-quick) ease-in-out;
+  transition: box-shadow var(--timing-quick) ease-in-out;
   position: relative;
   box-sizing: border-box;
   font-size: var(--font-size);
@@ -3489,7 +3595,7 @@ component specific, BEM (Block, Element, Modifier)
   content: "";
   width: 100%;
   height: var(--spacing-2xs);
-  background: var(--primary-color);
+  background: var(--header-primary-color);
   display: block;
   position: absolute;
   top: 0;
@@ -3810,6 +3916,7 @@ component specific, BEM (Block, Element, Modifier)
   padding: var(--spacing-2xs) var(--spacing);
   text-align: left;
   text-decoration: none;
+  transition: background-color var(--timing-quick) ease-in-out;
   width: 100%;
   position: relative;
 }
@@ -4416,6 +4523,14 @@ BEM standard: Block, Element, Modifier
 .utah-design-system .search-modal__icon-search[class*=utds-icon-before-]::before {
   font-size: 1.3rem;
 }
+.utah-design-system .search-modal .button.button--solid.button--primary-color {
+  background-color: var(--header-primary-color);
+  border-color: var(--header-primary-color);
+}
+.utah-design-system .search-modal .button.button--solid.button--primary-color:hover {
+  background-color: var(--header-primary-color-dark);
+  border-color: var(--header-primary-color-dark);
+}
 .utah-design-system .documentation-template {
   display: flex;
   flex-direction: row;
@@ -4612,9 +4727,9 @@ BEM standard: Block, Element, Modifier
   border-radius: var(--radius-circle);
   box-sizing: border-box;
   color: white;
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semi-bold);
-  line-height: var(--font-size-2xs);
+  line-height: var(--font-size-xs);
   min-height: var(--spacing-xs);
   min-width: var(--spacing-2xs);
   padding: var(--spacing-3xs) var(--spacing-2xs);
@@ -4973,6 +5088,9 @@ BEM standard: Block, Element, Modifier
 /*
 ############     _popup.scss      ############
 */
+.utah-design-system .swatches {
+  display: inline-block;
+}
 .utah-design-system .color-family {
   display: flex;
   margin: 0 0 var(--spacing-2xs) 0;
@@ -4999,8 +5117,8 @@ BEM standard: Block, Element, Modifier
   padding: 0;
 }
 .utah-design-system .color-family__swatch {
-  width: 20px;
-  height: 20px;
+  width: 94px;
+  height: 24px;
   border: none;
   border-radius: 0;
   min-height: auto;
@@ -5028,6 +5146,15 @@ BEM standard: Block, Element, Modifier
 .utds-citizen-experience-wrapper .main-menu__search {
   margin-right: var(--spacing);
 }
+.utah-design-system .utds-utah-id__button {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  padding: 0 var(--spacing);
+}
 .utah-design-system .utds-action-items-wrapper {
   display: flex;
   gap: var(--spacing);
@@ -5064,7 +5191,7 @@ BEM standard: Block, Element, Modifier
   margin-left: var(--spacing-xs);
 }
 .utds-header {
-  padding: var(--spacing-s) var(--spacing-l);
+  padding: var(--spacing-s) var(--spacing);
   border-bottom: 1px solid #d7d7d7 !important;
   width: 100%;
   justify-content: flex-start;
@@ -5082,6 +5209,14 @@ BEM standard: Block, Element, Modifier
 .utds-header--small {
   height: 60px;
 }
+.utds-header + .main-menu__outer .menu-item a[href].menu-item--selected,
+.utds-header + .main-menu__outer .vertical-menu a[href].vertical-menu__link-title:hover,
+.utds-header + .main-menu__outer .vertical-menu button.vertical-menu__button-title:hover {
+  color: var(--header-primary-color);
+}
+.utds-header + .main-menu__outer .horizontal-menu > ul li a[href].menu-item--selected + span.menu-chiclet::after {
+  background-color: var(--header-primary-color);
+}
 .utds-header-desktop--hidden {
   display: none !important;
 }
@@ -5100,9 +5235,6 @@ BEM standard: Block, Element, Modifier
   display: block;
 }
 .utah-design-system .utds-title-wrapper {
-  font-size: var(--font-size-3xl);
-  font-weight: 600;
-  color: var(--gray-medium-color);
   display: flex;
   align-items: center;
   flex: 1;
@@ -5134,8 +5266,13 @@ BEM standard: Block, Element, Modifier
   max-width: 100%;
 }
 .utah-design-system .utds-title-wrapper__title {
+  color: var(--header-title-color);
+  font-family: var(--ut-industry-font-family);
+  font-size: 2.7rem;
+  font-weight: 600;
   line-height: 0.8;
-  color: var(--gray-medium-color);
+  margin-top: 0.4rem;
+  white-space: nowrap;
 }
 .utah-design-system .utah-logo-wrapper {
   height: 100%;
@@ -5184,12 +5321,89 @@ BEM standard: Block, Element, Modifier
   text-decoration: none;
 }
 @media screen and (max-width: 768px) {
-  .utah-design-system .utds-title-wrapper {
-    font-size: var(--font-size-xl);
+  .utah-design-system .utds-title-wrapper__title {
+    font-size: 1.9rem;
   }
 }
-.utah-design-system.utds-official-website-popup__wrapper {
+@media screen and (max-width: 640px) {
+  .utah-design-system .utds-title-wrapper__logo {
+    flex: 1 0 auto;
+  }
+  .utah-design-system .utds-title-wrapper__title {
+    flex: 1 1 auto;
+    white-space: normal;
+  }
+}
+.utds-official-website__wrapper button {
+  padding: 0;
+  border: none;
+  display: inline-flex;
+  min-height: 0;
+  background: transparent;
+  color: var(--gray-light-color);
+  font-size: var(--font-size-xs);
+  border-radius: 0;
+}
+.utds-official-website__wrapper button span {
+  text-decoration: underline;
+}
+.utds-official-website__wrapper button svg {
+  margin-left: var(--spacing-2xs);
+}
+.utds-official-website__wrapper button:hover {
+  color: white;
+}
+.utds-official-website__wrapper button:active {
+  scale: 1;
+  box-shadow: none;
+}
+.utds-official-website__wrapper button[aria-expanded=true] svg {
+  transform: rotate(180deg);
+}
+.utds-official-website__wrapper button:focus-visible {
+  outline: 2px solid #FFF;
+  outline-offset: 2px;
+  border-radius: var(--radius-small1x);
+}
+.utds-official-website__banner {
+  padding: var(--spacing-3xs) var(--spacing-l);
   background: var(--gray-color);
+  color: var(--gray-light-color);
+  font-size: var(--font-size-xs);
+}
+.utds-official-website-popup__wrapper {
+  background: var(--gray-dark-color);
+}
+.utds-official-website__button-title--mobile {
+  display: none;
+}
+@media screen and (max-width: 990px) {
+  .utah-design-system .utds-official-website-popup__content {
+    flex-wrap: wrap;
+    gap: var(--spacing-l);
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+@media screen and (max-width: 768px) {
+  .utds-official-website__banner > span:first-child, .utds-official-website__button-title--desktop {
+    display: none;
+  }
+  .utds-official-website__button-title--mobile {
+    display: inline;
+  }
+  .utds-official-website__banner {
+    padding: var(--spacing-3xs) 0;
+  }
+  .utds-official-website__button {
+    width: 100%;
+    outline-offset: 0 !important;
+    justify-content: flex-start !important;
+    padding: 0 var(--spacing-l) !important;
+  }
+}
+.utah-design-system.utds-official-website-popup__wrapper {
+  background: var(--gray-dark-color);
   color: white;
   padding: var(--spacing-l);
   position: relative;
@@ -5243,7 +5457,7 @@ BEM standard: Block, Element, Modifier
   margin-top: var(--spacing-xs);
 }
 .utah-design-system .utds-official-website-popup__official-image {
-  width: 150px;
+  width: 325px;
   font-family: "Source Sans 3", "Source Sans Pro", Arial, Helvetica, sans-serif;
   font-weight: normal;
   font-size: 14px;
@@ -5252,6 +5466,7 @@ BEM standard: Block, Element, Modifier
 }
 .utah-design-system .utds-official-website-popup__copyright {
   font-size: var(--font-size-s);
+  margin-left: 27%;
 }
 .utds-badge__wrapper {
   align-items: center;
@@ -5260,11 +5475,11 @@ BEM standard: Block, Element, Modifier
   box-sizing: border-box;
   color: white;
   display: flex;
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semi-bold);
   height: 15px;
   justify-content: center;
-  line-height: var(--font-size-2xs);
+  line-height: var(--font-size-xs);
   min-width: 15px;
   padding: 1px 2px;
   position: absolute;
@@ -5300,10 +5515,10 @@ BEM standard: Block, Element, Modifier
 .utds-header-mobile-menu.utah-design-system {
   transition: opacity 200ms ease;
   position: absolute;
-  top: 106px;
+  top: 126px;
   left: 0;
   width: 100%;
-  height: calc(100% - 106px);
+  height: calc(100% - 126px);
   z-index: 1000;
   background-color: transparent;
 }
@@ -5353,7 +5568,7 @@ BEM standard: Block, Element, Modifier
   content: "";
   width: 100%;
   height: var(--spacing-2xs);
-  background: var(--primary-color);
+  background: var(--header-primary-color);
   display: block;
   position: absolute;
   bottom: 0;
@@ -5431,9 +5646,12 @@ BEM standard: Block, Element, Modifier
   height: 100%;
 }
 .utds-footer__official-site {
-  font-size: var(--font-size-l);
+  font-size: var(--font-size);
   font-weight: var(--font-weight-semi-bold);
 }
+.utds-footer__official-site-wrapper {
+  line-height: var(--spacing);
+}
 .utds-footer__copyright {
   font-size: var(--font-size-s);
 }
@@ -5505,6 +5723,185 @@ BEM standard: Block, Element, Modifier
     flex-direction: column;
   }
 }
+.utah-design-system .utds-notifications-drawer .drawer__inner {
+  max-width: 350px;
+  color: var(--gray-color);
+  background: var(--gray-light-color);
+}
+.utah-design-system .utds-notifications-drawer .drawer__title {
+  background: white;
+  height: 38px;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  box-sizing: content-box;
+}
+.utah-design-system .utds-notifications-drawer .utds-icon-before-alert {
+  font-size: 1.2rem;
+}
+.utah-design-system .utds-notifications-drawer__header-buttons {
+  background: var(--gray-light-color);
+  display: flex;
+  gap: var(--spacing-s);
+  padding: var(--spacing);
+  border-bottom: 1px solid var(--gray-3-1-contrast);
+}
+.utah-design-system .utds-notifications-drawer__header-buttons .button {
+  padding: 0 var(--spacing);
+}
+.utah-design-system .utds-notifications-drawer a.notifications-settings-button {
+  background: var(--gray-color);
+  color: white;
+  fill: white;
+}
+.utah-design-system .utds-notifications-drawer a.notifications-settings-button:hover {
+  background-color: var(--gray-dark-color);
+  box-shadow: none;
+  color: white;
+  fill: white;
+}
+.utah-design-system .utds-notifications-drawer a.notifications-settings-button:focus-visible {
+  outline: 2px solid var(--notifications-drawer-color);
+  outline-offset: 2px;
+  transition: none;
+}
+.utah-design-system .utds-notifications-drawer .utds-notify-list-item:focus, .utah-design-system .utds-notifications-drawer .utds-notify-list-item:focus-visible, .utah-design-system .utds-notifications-drawer [tabindex]:focus, .utah-design-system .utds-notifications-drawer [tabindex]:focus-visible {
+  outline: 3px solid var(--notifications-drawer-color);
+  outline-offset: -3px;
+  border: none;
+  border-bottom: 1px solid var(--gray-3-1-contrast);
+  box-shadow: none;
+}
+.utah-design-system .utds-notifications-drawer .button--primary-color {
+  border-color: var(--notifications-drawer-color);
+  color: var(--notifications-drawer-color);
+}
+.utah-design-system .utds-notifications-drawer .button--primary-color:hover {
+  background-color: var(--notifications-drawer-color);
+  color: white;
+}
+.utah-design-system .utds-notifications-drawer button.button--solid.button--primary-color {
+  background-color: var(--notifications-drawer-color);
+  border-color: var(--notifications-drawer-color);
+  color: white;
+}
+.utah-design-system .utds-notifications-drawer button.button--solid.button--primary-color:hover {
+  background-color: var(--notifications-drawer-color-dark);
+  border-color: var(--notifications-drawer-color-dark);
+}
+.utah-design-system .utds-notifications__list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  height: calc(100vh - 123px);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.utah-design-system .utds-notify-list-item {
+  border-bottom: 1px solid var(--gray-3-1-contrast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  padding: 0 0 var(--spacing-s) 0;
+  background: white;
+}
+.utah-design-system .utds-notify-list-item:focus-visible, .utah-design-system .utds-notify-list-item:focus {
+  outline: 3px solid var(--notifications-drawer-color);
+  outline-offset: -3px;
+}
+.utah-design-system .utds-notify-list-item:hover {
+  background: var(--gray-light-color);
+  cursor: pointer;
+}
+.utah-design-system .utds-notify-list-item__header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-s);
+}
+.utah-design-system .utds-notify-list-item__title {
+  font-size: var(--font-size-m);
+  line-height: 1.1;
+  flex: 1;
+  font-weight: bold;
+}
+.utah-design-system .utds-notify-list-item__status {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  height: calc(100% - 4px);
+  width: 6px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  background: var(--notifications-drawer-color);
+}
+.utah-design-system .utds-notify-list-item__status--is-read {
+  background: transparent;
+  font-weight: normal;
+}
+.utah-design-system .utds-notify-list-item__icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-s) 0 var(--spacing-s) var(--spacing);
+}
+.utah-design-system .utds-notify-list-item__icon span {
+  font-size: 1.5rem;
+}
+.utah-design-system .utds-notify-list-item__icon span[class*=error] {
+  color: #ad360d;
+}
+.utah-design-system .utds-notify-list-item__icon span[class*=clock] {
+  color: #2e7114;
+}
+.utah-design-system .utds-notify-list-item__icon span[class*=info] {
+  color: #175ae2;
+}
+.utah-design-system .utds-notify-list-item__icon span[class*=help] {
+  color: #6e6e6e;
+}
+.utah-design-system .utds-notify-list-item__icon span[class*=account] {
+  color: #175ae2;
+}
+.utah-design-system .utds-notify-list-item__icon span[class*=utds-icon-before]::before {
+  margin: 0;
+}
+.utah-design-system .utds-notify-list-item__time {
+  padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
+  color: var(--gray-medium-color);
+}
+.utah-design-system .utds-notify-list-item__brand-wrapper {
+  display: flex;
+  height: 34px;
+}
+.utah-design-system .utds-notify-list-item__brand {
+  max-height: 35px;
+  min-width: 0;
+}
+.utah-design-system .utds-notify-list-item__message {
+  padding: 0 var(--spacing);
+  line-height: 1.3;
+}
+.utah-design-system .utds-notify-list-item__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-xs) var(--spacing) 0 var(--spacing);
+}
+.utah-design-system .utds-notify-list-item__footer .utds-notify-list-item__link {
+  flex: 0 0 auto;
+}
+.utah-design-system .utds-notify-list-item:last-of-type {
+  border-bottom: 1px solid var(--gray-3-1-contrast);
+}
+.utah-design-system .utds-notify-list-item--busy-card {
+  padding: 3rem 1rem;
+}
+.utah-design-system .utds-notify-list-item--is-read {
+  background-color: var(--gray-light-color);
+}
 /*
 ############     _utilities.scss      ############
 utility classes, atomic css
@@ -5800,4 +6197,4 @@ PRINT SCSS
 A place to add css temporarily
 NOTE: CSS added this this file should eventually be removed or
 located to the correct folder/file where it best belongs.
-*/
+*//*$vite$:1*/