superdesk-ui-framework 3.0.1-beta.13 → 3.0.1-beta.15

package/dist/superdesk-ui.bundle.css

@@ -9796,11 +9796,11 @@
     box-sizing: content-box;
     line-height: 100%;
     color: #9b27b0;
-    right: -0.5rem;
-    bottom: -0.7rem;
+    inset-inline-end: -0.4rem;
+    inset-block-end: -0.6rem;
     height: 1em;
     width: 1em;
-    background-color: var(--sd-item__main-Bg);
+    background-color: var(--sd-item__main-Bg) !important;
     border-radius: var(--b-radius--full);
     padding: 1px;
     z-index: 1;
@@ -9816,8 +9816,8 @@
       font-size: 32px; }
     .icn-mix--2x .icn-mix__sub-icn {
       font-size: 1.6rem;
-      right: -0.6rem;
-      bottom: -0.3rem; }
+      inset-inline-end: -0.6rem;
+      inset-block-end: -0.3rem; }
 
 .double-size-icn {
   display: inline-block;
@@ -9834,13 +9834,13 @@
     opacity: 0.5; }
 
 .subnav .icn-mix__sub-icn {
-  background-color: var(--sd-colour-panel-bg--100); }
+  background-color: var(--sd-colour-panel-bg--100) !important; }
 
 .subnav--darker .icn-mix__sub-icn {
-  background-color: var(--sd-colour-panel-bg--200); }
+  background-color: var(--sd-colour-panel-bg--200) !important; }
 
 .subnav--dark-blue-grey .icn-mix__sub-icn {
-  background-color: var(--color-subnav-bg--blueGrey-10);
+  background-color: var(--color-subnav-bg--blueGrey-10) !important;
   color: #d686e4; }
 
 .subnav--dark-blue-grey .icn-mix__icn {
@@ -10917,6 +10917,7 @@
   --sd-colour-sidebar-menu--00:           hsla(var(--sd-colour-cool-grey-l--85), 1);
   --sd-colour-sidebar-menu--10:           hsla(var(--sd-colour-cool-grey-l--80), 1);
   --sd-colour-sidebar-menu--20:           hsla(var(--sd-colour-cool-grey-l--75), 1);
+  --sd-colour-quickbar-menu:              hsla(var(--sd-colour-cool-grey-l--98), 1);
   --sd-colour-background__left-nav:       var(--sd-colour-bg--99);
   --sd-colour-top-menu:                   var(--sd-colour-bg--02);
   --sd-colour-top-menu__btn:              var(--sd-colour-bg--03);
@@ -10945,6 +10946,7 @@
   --color-dropdown-menu-Bg:               var(--sd-colour-bg--99);
   --color-modal-Bg:                       var(--sd-colour-bg--99);
   --sd-colour--shadow-line:               hsla(var(--sd-colour-cool-grey-l--70), 0);
+  --sd-colour--shadow-line--m:            hsla(var(--sd-colour-cool-grey-l--80), 0);
   --sd-shadow__subnav:                    0 1px 0px var(--sd-colour--shadow-line), 0 1px 3px hsla(0, 0%, 0%, 0.07), 0 1px 0 0 hsla(0, 0%, 0%, 0.1);
   --sd-shadow__item--selected:            0 0 0 2px var(--sd-colour-interactive), 0 0 0 5px var(--sd-colour-interactive--alpha-30);
   --sd-shadow__item--unread:              0 0 0 1px var(--sd-colour-interactive--alpha-30), inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
@@ -11023,6 +11025,7 @@
   --sd-colour-interactive--darken-50:     hsla(var(--sd-colour-interactive-l--05), 1);
   --sd-colour-btn-txt-neutral:            hsla(var(--sd-colour-neutral-l--80), 1);
   --sd-colour--shadow-line:               hsla(var(--sd-colour-cool-grey-l--75), 0.2);
+  --sd-colour--shadow-line--m:            hsla(var(--sd-colour-cool-grey-l--80), 0.2);
   --sd-colour-panel-bg--000:              hsla(var(--sd-colour-cool-grey-l--10), 1);
   --sd-colour-panel-bg--050:              hsla(var(--sd-colour-cool-grey-l--05), 1);
   --sd-colour-panel-bg--100:              hsla(var(--sd-colour-cool-grey-l--15), 1);
@@ -11031,6 +11034,7 @@
   --sd-colour-sidebar-menu--00:           hsla(var(--sd-colour-cool-grey-l--25), 1);
   --sd-colour-sidebar-menu--10:           hsla(var(--sd-colour-cool-grey-l--30), 1);
   --sd-colour-sidebar-menu--20:           hsla(var(--sd-colour-cool-grey-l--35), 1);
+  --sd-colour-quickbar-menu:              hsla(var(--sd-colour-cool-grey-l--20), 1);
   --sd-colour-background__left-nav:       var(--sd-colour-bg--04);
   --sd-colour-top-menu:                   var(--sd-colour-bg--02);
   --sd-colour-top-menu__btn:              var(--sd-colour-bg--03);
@@ -11125,8 +11129,8 @@
   --sd-colour-background__base--30:     hsla(0, 0%, 70%, 1);
   --color-text:                         hsla(214, 13%, 20%, 1);
   --color-text--inverse:                hsla(0, 0%, 98%, 1);
-  --color-text-light:                   hsla(214, 13%, 30%, 0.75);
-  --color-text-lighter:                 hsla(214, 13%, 30%, 0.55);
+  --color-text-light:                   hsla(214, 13%, 40%, 1);
+  --color-text-lighter:                 hsla(214, 13%, 60%, 1);
   --color-icon-default:                 hsla(214, 13%, 30%, 1);
   --sd-slugline-color:                  hsla(197, 100%, 15%, 1) !important;
   --sd-time-schedule-color:             hsla(268, 100%, 25%, 1);
@@ -11176,9 +11180,9 @@
   --sd-colour-background__base--20:     hsla(0, 0%, 20%, 1);
   --sd-colour-background__base--30:     hsla(0, 0%, 30%, 1);
   --color-text:                         hsla(0, 0%, 96%, 1);
-  --color-text-light:                   hsla(214, 13%, 96%, 0.75);
-  --color-text-lighter:                 hsla(214, 13%, 96%, 0.55);
-  --color-icon-default:                 hsla(214, 13%, 96%, 0.65);
+  --color-text-light:                   hsla(214, 13%, 76%, 1);
+  --color-text-lighter:                 hsla(214, 13%, 56%, 1);
+  --color-icon-default:                 hsla(214, 13%, 64%, 1);
   --sd-slugline-color:                  hsla(197, 60%, 75%, 1) !important;
   --sd-time-schedule-color:             hsla(268, 60%, 65%, 1);
   --sd-navy-color:                      hsla(240, 90%, 75%, 1);
@@ -17084,6 +17088,27 @@ h1, h2, h3, h4, h5, h6 {
 .sd-width--full {
   width: var(--width__container--full); }
 
+.sd-gap--x-small {
+  gap: var(--gap--x-small); }
+
+.sd-gap--small {
+  gap: var(--gap--small); }
+
+.sd-gap--medium {
+  gap: var(--gap--medium); }
+
+.sd-gap--large {
+  gap: var(--gap--large); }
+
+.sd-gap--x-large {
+  gap: var(--gap--x-large); }
+
+.sd-gap--xx-large {
+  gap: var(--gap--xx-large); }
+
+.sd-gap--auto {
+  gap: var(--gap--auto); }
+
 :root {
   --new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 4px 0 rgba(0,0,0,.14); }
 
@@ -17293,7 +17318,7 @@ h1, h2, h3, h4, h5, h6 {
   border-radius: var(--b-radius--full);
   background-color: transparent;
   opacity: 0.75;
-  background-color: rgba(55, 55, 55, 0);
+  background-color: rgba(125, 138, 155, 0);
   color: inherit;
   text-decoration: none;
   cursor: pointer;
@@ -17373,7 +17398,7 @@ h1, h2, h3, h4, h5, h6 {
   border-radius: var(--b-radius--full);
   background-color: transparent;
   opacity: 0.75;
-  background-color: rgba(55, 55, 55, 0);
+  background-color: rgba(125, 138, 155, 0);
   color: inherit;
   text-decoration: none;
   cursor: pointer;
@@ -28050,11 +28075,11 @@ a.label {
     box-sizing: content-box;
     line-height: 100%;
     color: #9b27b0;
-    right: -0.5rem;
-    bottom: -0.7rem;
+    inset-inline-end: -0.4rem;
+    inset-block-end: -0.6rem;
     height: 1em;
     width: 1em;
-    background-color: var(--sd-item__main-Bg);
+    background-color: var(--sd-item__main-Bg) !important;
     border-radius: var(--b-radius--full);
     padding: 1px;
     z-index: 1;
@@ -28070,8 +28095,8 @@ a.label {
       font-size: 32px; }
     .icn-mix--2x .icn-mix__sub-icn {
       font-size: 1.6rem;
-      right: -0.6rem;
-      bottom: -0.3rem; }
+      inset-inline-end: -0.6rem;
+      inset-block-end: -0.3rem; }
 
 .double-size-icn {
   display: inline-block;
@@ -28088,13 +28113,13 @@ a.label {
     opacity: 0.5; }
 
 .subnav .icn-mix__sub-icn {
-  background-color: var(--sd-colour-panel-bg--100); }
+  background-color: var(--sd-colour-panel-bg--100) !important; }
 
 .subnav--darker .icn-mix__sub-icn {
-  background-color: var(--sd-colour-panel-bg--200); }
+  background-color: var(--sd-colour-panel-bg--200) !important; }
 
 .subnav--dark-blue-grey .icn-mix__sub-icn {
-  background-color: var(--color-subnav-bg--blueGrey-10);
+  background-color: var(--color-subnav-bg--blueGrey-10) !important;
   color: #d686e4; }
 
 .subnav--dark-blue-grey .icn-mix__icn {
@@ -32340,6 +32365,9 @@ a.label {
     text-align: end;
     border-top: 1px solid var(--sd-colour-line--x-light);
     min-height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
     *zoom: 1; }
     .modal__content .modal__footer:before, .modal__content .modal__footer:after {
       display: table;
@@ -33171,6 +33199,7 @@ a.label {
     .simple-list .simple-list__item [class^="icon-"], .simple-list .simple-list__item [class*=" icon-"] {
       flex-grow: 0;
       flex-shrink: 0;
+      color: var(--color-icon-default) !important;
       opacity: .75; }
     .simple-list .simple-list__item--stacked {
       display: flex;
@@ -35117,7 +35146,7 @@ tags-input,
     text-align: center;
     border-top: 0;
     border-top-color: var(--sd-colour-line--medium);
-    border-top-style: solid; }
+    border-style: solid; }
   .sd-content-divider.sd-content-divider--horizontal {
     display: flex;
     clear: both;
@@ -35136,7 +35165,7 @@ tags-input,
       border-top-color: inherit;
       border-bottom: 0;
       transform: translateY(50%);
-      border-top-style: inherit; }
+      border-style: inherit; }
     .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--text-left::before {
       width: 5%; }
     .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--text-left::after {
@@ -35152,7 +35181,7 @@ tags-input,
     vertical-align: middle;
     border-top: 0;
     border-left: 1px var(--sd-colour-line--medium);
-    border-left-style: solid;
+    border-style: solid;
     flex-grow: 0;
     align-self: stretch;
     min-height: 1.6rem; }
@@ -35173,11 +35202,11 @@ tags-input,
         border-left: 1px var(--sd-colour-line--medium);
         border-bottom: 0;
         width: 1px;
-        border-left-style: solid; }
+        border-style: solid; }
       .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dashed::before, .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dashed::after {
         border-left-style: dashed; }
       .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dotted::before, .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dotted::after {
-        border-left-style: dotted;
+        border-style: dotted;
         border-color: var(--sd-colour-line--strong); }
   .sd-content-divider.sd-content-divider--dashed {
     border-style: dashed; }
@@ -35260,7 +35289,8 @@ tags-input,
 .table-list {
   display: flex;
   flex-direction: column;
-  align-self: stretch; }
+  align-self: stretch;
+  overflow: hidden !important; }
   .table-list--comfortable {
     gap: 1.6rem; }
   .table-list--contained {
@@ -35276,7 +35306,7 @@ tags-input,
   grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
   position: relative;
   flex-direction: row;
-  padding: 8px;
+  padding: 0.8rem;
   min-height: 4.2rem;
   border-radius: var(--b-radius--medium);
   background-color: var(--sd-item__main-Bg);
@@ -35384,6 +35414,15 @@ tags-input,
   align-items: center;
   gap: 8px; }
 
+.table-list__item-border {
+  width: 6px;
+  background-color: var(--sd-colour-panel-bg--100);
+  z-index: 2;
+  position: absolute;
+  inset-block: 3px;
+  inset-inline-start: 3px;
+  border-radius: 2px; }
+
 .table-list__item-content-block {
   display: flex;
   align-items: center;
@@ -35639,7 +35678,7 @@ tags-input,
   .side-panel .side-panel__header {
     grid-column: 1/2;
     grid-row: 1/2;
-    z-index: 1;
+    z-index: 2;
     position: relative;
     min-height: 4.8rem;
     display: flex;
@@ -39576,7 +39615,8 @@ a.text-link {
   min-height: 4rem;
   flex-direction: row;
   background-color: var(--sd-item__main-Bg);
-  transition: background-color 0.2s linear; }
+  transition: background-color 0.2s linear;
+  flex-shrink: 0; }
   .sd-list-item:hover {
     background-color: var(--sd-item__main-Bg--hover);
     cursor: pointer; }
@@ -39800,13 +39840,14 @@ a.text-link {
 
 .sd-list-item [class^="icon-"],
 .sd-list-item [class*=" icon-"] {
-  opacity: 0.6;
-  vertical-align: middle; }
+  opacity: 0.75;
+  vertical-align: middle;
+  color: var(--color-icon-default); }
 
 .sd-list-item time [class^="icon-"],
 .sd-list-item time [class*=" icon-"] {
   vertical-align: top;
-  margin-right: 0.2rem; }
+  margin-inline-end: 0.2rem; }
 
 .sd-list-item time {
   color: var(--color-text-light);
@@ -39848,17 +39889,26 @@ a.text-link {
 
 .sd-list-item .sd-list-item__inline-icon,
 .sd-list-item .sd-list-item__inline-text {
-  margin-right: 0.6rem; }
+  margin-inline-end: 0.6rem; }
+
+.sd-list-item .sd-list-item__icon-group {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap--small);
+  min-height: 2rem;
+  margin-inline-end: 4px; }
+  .sd-list-item .sd-list-item__icon-group .sd-list-item__inline-icon {
+    margin: 0; }
 
 .sd-list-item .sd-list-item__text-strong {
   font-weight: 500;
   color: var(--color-text); }
 
 .sd-list-item .sd-list-item__element-rm-10 {
-  margin-right: 1rem; }
+  margin-inline-end: 1rem; }
 
 .sd-list-item .sd-list-item__element-lm-10 {
-  margin-left: 1rem; }
+  margin-inline-start: 1rem; }
 
 .sd-list-item .sd-list-item__location {
   padding-left: 1.6rem;
@@ -39886,7 +39936,7 @@ a.text-link {
   width: 3rem;
   background-color: #69b0a2;
   border-radius: var(--b-radius--full);
-  margin-right: 0.6rem;
+  margin-inline-end: 0.6rem;
   color: #fff;
   text-align: center;
   text-transform: uppercase;
@@ -39911,8 +39961,8 @@ a.text-link {
     color: transparent;
     border: 1px dashed rgba(123, 123, 123, 0.6); }
   .avatar--on-right {
-    margin-right: 0;
-    margin-left: 0.6rem; }
+    margin-inline-end: 0;
+    margin-inline-start: 0.6rem; }
 
 .dropdown__toggle:hover [class^="icon-"],
 .dropdown__toggle:hover [class*=" icon-"] {
@@ -39937,7 +39987,7 @@ a.text-link {
   z-index: 0;
   display: flex;
   flex-direction: column;
-  margin-left: 1rem; }
+  margin-inline-start: 1rem; }
   .sd-list-item-nested__childs .sd-list-item {
     margin-top: 0;
     border-top: 1px solid var(--sd-colour-line--x-light); }
@@ -40001,7 +40051,7 @@ a.text-link {
         color: var(--sd-colour-interactive--darken-20);
         border-bottom: 1px dotted currentColor; }
   .sd-list-header .sd-list-header__number {
-    margin-left: 1rem; }
+    margin-inline-start: 1rem; }
   .sd-list-header .sd-list-header__stretch-bar {
     flex-grow: 1;
     height: 1px;
@@ -41078,9 +41128,10 @@ a.text-link {
 .sd-collapse-box {
   display: flex;
   flex-direction: column;
-  border-radius: var(--b-radius--x-small);
+  border-radius: var(--b-radius--small);
   position: relative;
-  margin-bottom: 1rem; }
+  margin-bottom: 1rem;
+  border: 1px solid var(--sd-colour--shadow-line--m); }
   .sd-collapse-box .sd-collapse-box__header {
     display: block;
     flex-grow: 0;
@@ -41092,7 +41143,7 @@ a.text-link {
     right: 1rem;
     top: 0.8rem;
     z-index: 2;
-    color: #666; }
+    color: var(--color-icon-default); }
     .sd-collapse-box .sd-collapse-box__tools--flex {
       position: relative;
       right: 0;
@@ -41102,15 +41153,15 @@ a.text-link {
       margin: -1.4rem -1rem; }
     .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn {
       flex-grow: 1;
-      color: #666; }
+      color: var(--color-icon-default); }
       .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:hover .icn-btn, .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:hover .sd-thumb-carousel__btn--prev, .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:hover .sd-thumb-carousel__btn--next,
       .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:hover .p-carousel-prev, .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:hover .p-carousel-next {
-        background-color: rgba(155, 155, 155, 0.25);
+        background-color: rgba(140, 151, 166, 0.25);
         color: #fff;
         opacity: 1; }
       .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:active .icn-btn, .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:active .sd-thumb-carousel__btn--prev, .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:active .sd-thumb-carousel__btn--next,
       .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:active .p-carousel-prev, .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:active .p-carousel-next {
-        background-color: rgba(155, 155, 155, 0.35);
+        background-color: rgba(169, 177, 188, 0.25);
         color: var(--sd-colour-interactive);
         opacity: 1; }
   .sd-collapse-box .sd-collapse-box__content-wraper {
@@ -41130,8 +41181,7 @@ a.text-link {
     padding: 1rem;
     margin: 0 -2rem 3rem -2rem; }
     .sd-collapse-box .sd-collapse-box__content-block--top {
-      margin-top: 2.2rem;
-      background-color: rgba(0, 0, 0, 0.04); }
+      margin-top: 2.2rem; }
   .sd-collapse-box--open .sd-collapse-box__content-wraper {
     max-height: 80rem; }
   .sd-collapse-box--open .sd-collapse-box__content {
@@ -45536,6 +45586,8 @@ a.text-link {
   box-shadow: var(--sd-shadow__dropdown);
   border-radius: var(--b-radius--small);
   text-align: start; }
+  .dropdown__menu .dropdown {
+    width: 100%; }
   .dropdown__menu li a:not(.btn), .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button), .dropdown__menu .dropdown__menu-item a:not(.btn), .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
     display: block;
     font-weight: normal;
@@ -45599,8 +45651,10 @@ a.text-link {
         margin: 0.6rem 0 0.4rem; }
     .dropdown__menu--has-head-foot .dropdown__menu-body {
       overflow-y: auto;
+      overflow-x: hidden;
       flex: 0 1;
-      padding: 0.6rem 0; }
+      padding: 0.6rem 0;
+      max-height: 320px; }
     .dropdown__menu--has-head-foot .dropdown__menu-body:first-child .dropdown__menu-label {
       margin: 0.6rem 0 0.4rem; }
     .dropdown__menu--has-head-foot .dropdown__menu-footer {
@@ -46365,7 +46419,9 @@ a.text-link {
     letter-spacing: 0.02em; }
 
 .form-label {
-  display: inline-block;
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: flex-start;
   font-size: 1.1rem;
   margin: 0 0.5rem 0 0;
   line-height: 1;
@@ -46389,7 +46445,57 @@ a.text-link {
       content: "*";
       vertical-align: top;
       font-size: 1.2rem;
-      padding-left: 0.3rem; }
+      padding-inline-start: 0.3rem;
+      margin-top: -2px; }
+  .form-label--invalid {
+    color: #e41b21; }
+  .form-label--focused {
+    color: var(--sd-colour-interactive); }
+    .form-label--focused.form-label--invalid {
+      color: #e41b21; }
+  .form-label--boxed {
+    background-color: rgba(67, 75, 86, 0.4);
+    border-radius: var(--b-radius--small);
+    color: #f3f5f6;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 8px;
+    font-size: 1.1rem;
+    font-family: "Roboto", Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    line-height: 2rem;
+    text-transform: uppercase;
+    font-style: normal;
+    letter-spacing: 0.08em;
+    height: 2rem;
+    transition: opacity ease 0.2s;
+    justify-self: start;
+    position: relative;
+    margin-bottom: 0.8rem;
+    transition: background-color ease 0.2s; }
+    .form-label--boxed--light {
+      background-color: rgba(67, 75, 86, 0.4);
+      color: #f3f5f6; }
+    .form-label--boxed--dark {
+      background-color: rgba(67, 75, 86, 0.4);
+      color: #f3f5f6; }
+    .form-label--boxed.form-label--required::after {
+      margin-inline-start: 0.2rem;
+      color: #e41b21;
+      content: "*";
+      vertical-align: top;
+      font-size: 1.2rem;
+      padding-inline-start: 0.3rem;
+      position: absolute;
+      inset-block-start: -4px;
+      inset-inline-end: -10px; }
+    .form-label--boxed.form-label--invalid, .form-label--boxed.form-label--invalid.form-label--focused {
+      background-color: #e41b21;
+      color: #f3f5f6; }
+    .form-label--boxed.form-label--focused {
+      background-color: var(--sd-colour-interactive);
+      color: #f3f5f6; }
 
 .form-label__container {
   display: flex;
@@ -46414,7 +46520,7 @@ a.text-link {
     border-bottom: 1px solid var(--color-input-border);
     width: 100%; }
   .sd-line-input__value {
-    margin-right: 6px;
+    margin-inline-end: 6px;
     text-transform: uppercase; }
   .sd-line-input input.sd-line-input__input, .sd-line-input textarea.sd-line-input__input {
     -webkit-appearance: none;
@@ -46430,7 +46536,8 @@ a.text-link {
     padding: 0 0.8rem;
     height: 3.2rem;
     border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
-    display: block; }
+    display: block;
+    position: relative; }
     .sd-line-input input.sd-line-input__input::placeholder, .sd-line-input textarea.sd-line-input__input::placeholder {
       color: var(--color-text-lighter);
       font-weight: 400;
@@ -46461,6 +46568,7 @@ a.text-link {
     height: 3.2rem;
     border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
     display: block;
+    position: relative;
     width: 26px;
     height: 26px;
     border: none;
@@ -46507,6 +46615,7 @@ a.text-link {
       height: 3.2rem;
       border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
       display: block;
+      position: relative;
       display: block;
       position: relative;
       z-index: 2; }
@@ -46533,28 +46642,35 @@ a.text-link {
     display: block; }
   .sd-line-input .sd-line-input__info-left, .sd-line-input .sd-line-input__info-right {
     position: absolute;
-    top: 2.5rem;
+    inset-block-start: 2.5rem;
     opacity: 0.3;
     font-size: 1.5rem;
     font-weight: 300; }
   .sd-line-input .sd-line-input__info-right {
-    right: 0.8rem; }
+    inset-inline-end: 0.8rem; }
   .sd-line-input .sd-line-input__info-left {
-    left: 0.8rem; }
+    inset-inline-start: 0.8rem; }
   .sd-line-input .sd-line-input__icon-left, .sd-line-input .sd-line-input__icon-right {
     position: absolute;
-    top: 1.6rem;
+    inset-block-start: 1.6rem;
     cursor: pointer; }
   .sd-line-input .sd-line-input__icon-right {
-    right: 0.2rem; }
+    inset-inline-end: 0.2rem; }
+  .sd-line-input .sd-line-input__icon-right.icn-btn, .sd-line-input .sd-line-input__icon-right.sd-thumb-carousel__btn--prev, .sd-line-input .sd-line-input__icon-right.sd-thumb-carousel__btn--next,
+  .sd-line-input .sd-line-input__icon-right.p-carousel-prev, .sd-line-input .sd-line-input__icon-right.p-carousel-next {
+    inset-inline-end: 0.2rem;
+    inset-block-start: 1.8rem;
+    z-index: 1; }
   .sd-line-input .sd-line-input__icon-left {
     left: 0.2rem; }
   .sd-line-input.sd-line-input--indent-l30 input.sd-line-input__input, .sd-line-input.sd-line-input--indent-l30 textarea.sd-line-input__input {
-    padding-left: 3rem; }
+    padding-inline-start: 3rem; }
   .sd-line-input.sd-line-input--indent-r30 input.sd-line-input__input, .sd-line-input.sd-line-input--indent-r30 textarea.sd-line-input__input {
-    padding-right: 3rem; }
+    padding-inline-end: 3rem; }
   .sd-line-input .sd-line-input__label {
-    display: inline-block;
+    display: inline-flex;
+    align-items: flex-start;
+    justify-content: flex-start;
     font-size: 1.1rem;
     margin: 0 0.5rem 0 0;
     line-height: 1;
@@ -46565,13 +46681,13 @@ a.text-link {
     position: absolute;
     line-height: 100%;
     margin: 0;
-    top: 0; }
+    inset-block-start: 0; }
     .sd-line-input .sd-line-input__label--required::after {
       color: #e41b21;
       content: "*";
       vertical-align: top;
       font-size: 1.2rem;
-      padding-left: 0.3rem; }
+      padding-inline-start: 0.3rem; }
   .sd-line-input .sd-line-input__hint,
   .sd-line-input .sd-line-input__message,
   .sd-line-input .sd-line-input__char-count {
@@ -46583,14 +46699,14 @@ a.text-link {
     letter-spacing: 0.03em; }
   .sd-line-input .sd-line-input__hint {
     position: absolute;
-    left: 1px;
-    right: auto;
-    padding-right: 5.5rem;
+    inset-inline-start: 1px;
+    inset-inline-end: auto;
+    padding-inline-end: 5.5rem;
     margin-top: 0.4rem; }
   .sd-line-input .sd-line-input__char-count {
     position: absolute;
-    right: 1px;
-    left: auto;
+    inset-inline-end: 1px;
+    inset-inline-start: auto;
     margin-top: 0.5rem;
     font-size: 1.1rem;
     font-weight: 400;
@@ -46651,9 +46767,9 @@ a.text-link {
   .sd-line-input.sd-line-input--is-select.sd-line-input--disabled:hover::after {
     opacity: 0.3; }
   .sd-line-input.sd-line-input--is-select.sd-line-input--no-label::after {
-    top: 1.4rem; }
+    inset-block-start: 1.4rem; }
   .sd-line-input.sd-line-input--is-select.sd-line-input--label-left::after {
-    top: 1.2rem; }
+    inset-block-start: 1.2rem; }
   .sd-line-input.sd-line-input--is-color .sd-line-input__label {
     line-height: 140%; }
   .sd-line-input.sd-line-input--required .sd-line-input__label::after {
@@ -46661,7 +46777,7 @@ a.text-link {
     content: "*";
     vertical-align: top;
     font-size: 1.2rem;
-    padding-left: 0.3rem; }
+    padding-inline-start: 0.3rem; }
   .sd-line-input.sd-line-input--no-label {
     padding-top: 0; }
   .sd-line-input.sd-line-input--no-margin {
@@ -46690,13 +46806,13 @@ a.text-link {
       position: static;
       grid-row: 2/3;
       grid-column: 3/4;
-      padding-right: 0; }
+      padding-inline-end: 0; }
     .sd-line-input--label-left .sd-line-input__char-count, .sd-line-input--label-left-auto .sd-line-input__char-count {
       position: static;
       grid-row: 2/3;
       grid-column: 5/4;
       text-align: end;
-      padding-left: 1.6rem; }
+      padding-inline-start: 1.6rem; }
   .sd-line-input--label-left-auto .sd-line-input__label {
     min-width: auto;
     max-width: none; }
@@ -46704,11 +46820,11 @@ a.text-link {
     height: 3rem;
     text-indent: 2.8rem; }
   .sd-line-input--with-icon-l input.sd-line-input__input, .sd-line-input--with-icon-l textarea.sd-line-input__input {
-    padding-right: 3rem; }
+    padding-inline-end: 3rem; }
   .sd-line-input .sd-line-input__plus-btn {
     position: absolute;
-    top: 1.8rem;
-    left: 0;
+    inset-block-start: 1.8rem;
+    inset-inline-start: 0;
     height: 2.2rem;
     width: 2.2rem;
     background-color: var(--sd-colour-interactive--alpha-70);
@@ -46737,6 +46853,154 @@ a.text-link {
     .sd-line-input .sd-line-input__plus-btn:hover {
       background-color: var(--sd-colour-interactive); }
 
+.sd-input__input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  color: var(--color-text);
+  border: 0;
+  border-bottom: 1px solid var(--color-input-border);
+  font-size: 1.4rem;
+  background-color: var(--color-input-bg);
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+  padding: 0 0.8rem;
+  height: 3.2rem;
+  border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
+  display: block;
+  position: relative; }
+  .sd-input__input::placeholder {
+    color: var(--color-text-lighter);
+    font-weight: 400;
+    opacity: 0.75; }
+  .sd-input__input:hover {
+    border-color: var(--color-input-border-hover);
+    background-color: var(--color-input-bg--hover); }
+  .sd-input__input:focus {
+    box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+    border-color: var(--sd-colour-interactive);
+    background-color: var(--sd-colour-interactive--alpha-20); }
+    .sd-input__input:focus::placeholder {
+      opacity: 0.45; }
+  .sd-input__input--invalid {
+    border-bottom: 1px solid #e41b21;
+    background-color: rgba(228, 27, 37, 0.075); }
+    .sd-input__input--invalid:hover {
+      background-color: rgba(228, 27, 37, 0.12);
+      border-bottom-color: #e41b21; }
+    .sd-input__input--invalid:focus {
+      background-color: rgba(228, 27, 37, 0.16);
+      border-bottom-color: #e41b21;
+      box-shadow: 0 1px 0 0 #e41b21; }
+  .sd-input__input--disabled {
+    opacity: 0.5;
+    background-color: var(--color-input-bg);
+    border-bottom: 1px dotted var(--color-input-border);
+    cursor: not-allowed !important;
+    box-shadow: none; }
+    .sd-input__input--disabled:hover {
+      background-color: var(--color-input-bg);
+      border-bottom-color: var(--color-input-border); }
+  .sd-input__input--boxed-style {
+    border: 0;
+    border: 2px solid var(--color-input-border);
+    background-color: transparent;
+    transition: all ease 0.3s;
+    border-radius: var(--b-radius--large);
+    display: block; }
+    .sd-input__input--boxed-style:hover {
+      border-color: var(--color-input-border-hover);
+      background-color: transparent; }
+    .sd-input__input--boxed-style:focus {
+      outline: none;
+      border-color: var(--sd-colour-interactive--alpha-50);
+      box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
+      background-color: transparent; }
+    .sd-input__input--boxed-style.sd-input__input--disabled {
+      border: 2px solid var(--color-input-border);
+      box-shadow: none; }
+      .sd-input__input--boxed-style.sd-input__input--disabled:hover {
+        border-color: var(--color-input-border); }
+    .sd-input__input--boxed-style.sd-input__input--invalid {
+      background-color: rgba(228, 27, 37, 0.075);
+      border-color: #e41b21; }
+      .sd-input__input--boxed-style.sd-input__input--invalid:hover, .sd-input__input--boxed-style.sd-input__input--invalid:focus {
+        background-color: rgba(228, 27, 37, 0.12);
+        box-shadow: none !important; }
+  .sd-input__input--medium {
+    border-radius: var(--b-radius--medium); }
+    .sd-input__input--medium:focus {
+      box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20); }
+  .sd-input__input--large {
+    padding: 0 1.6rem;
+    min-height: 4.8rem;
+    font-size: 2.4rem;
+    font-weight: 500; }
+  .sd-input__input--x-large {
+    padding: 0 1.6rem;
+    min-height: 5.6rem;
+    font-size: 3.2rem;
+    font-weight: 500; }
+
+.sd-input__select {
+  display: block;
+  position: relative;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  color: var(--color-text);
+  border: 0;
+  border-bottom: 1px solid var(--color-input-border);
+  font-size: 1.4rem;
+  background-color: var(--color-input-bg);
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+  padding: 0 0.8rem;
+  height: 3.2rem;
+  border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
+  display: block;
+  position: relative;
+  padding-inline-end: 2rem;
+  min-width: 5rem;
+  cursor: pointer; }
+  .sd-input__select::placeholder {
+    color: var(--color-text-lighter);
+    font-weight: 400;
+    opacity: 0.75; }
+  .sd-input__select:hover {
+    border-color: var(--color-input-border-hover);
+    background-color: var(--color-input-bg--hover); }
+  .sd-input__select:focus {
+    box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+    border-color: var(--sd-colour-interactive);
+    background-color: var(--sd-colour-interactive--alpha-20); }
+    .sd-input__select:focus::placeholder {
+      opacity: 0.45; }
+  .sd-input__select option {
+    color: inherit;
+    font-size: 1.4rem;
+    line-height: 2rem;
+    background-color: var(--color-dropdown-menu-Bg);
+    color: var(--color-dropdown-menu-text); }
+
+.sd-input__hint,
+.sd-input__message,
+.sd-input__char-count {
+  font-size: 1.2rem;
+  line-height: 1.4rem;
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+  color: var(--color-text-light);
+  font-weight: 300;
+  letter-spacing: 0.03em;
+  display: block; }
+
+.sd-input__char-count {
+  font-size: 1.1rem;
+  font-weight: 400;
+  font-style: italic; }
+  .sd-input__char-count--error {
+    color: #e41b21; }
+
 .sd-input {
   padding-top: 0;
   margin: 0;
@@ -46747,35 +47011,8 @@ a.text-link {
   position: relative;
   align-self: stretch; }
   .sd-input .sd-input__input {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    width: 100%;
-    color: var(--color-text);
-    border: 0;
-    border-bottom: 1px solid var(--color-input-border);
-    font-size: 1.4rem;
-    background-color: var(--color-input-bg);
-    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-    padding: 0 0.8rem;
-    height: 3.2rem;
-    border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
-    display: block;
     grid-row: 2/3;
     grid-column: 2/4; }
-    .sd-input .sd-input__input::placeholder {
-      color: var(--color-text-lighter);
-      font-weight: 400;
-      opacity: 0.75; }
-    .sd-input .sd-input__input:hover {
-      border-color: var(--color-input-border-hover);
-      background-color: var(--color-input-bg--hover); }
-    .sd-input .sd-input__input:focus {
-      box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
-      border-color: var(--sd-colour-interactive);
-      background-color: var(--sd-colour-interactive--alpha-20); }
-      .sd-input .sd-input__input:focus::placeholder {
-        opacity: 0.45; }
   .sd-input .sd-input__input-container {
     grid-row: 2/3;
     grid-column: 2/4; }
@@ -46789,46 +47026,8 @@ a.text-link {
     .sd-input input[type="file"].sd-input__input:focus {
       outline: none; }
   .sd-input .sd-input__select {
-    display: block;
-    position: relative;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    width: 100%;
-    color: var(--color-text);
-    border: 0;
-    border-bottom: 1px solid var(--color-input-border);
-    font-size: 1.4rem;
-    background-color: var(--color-input-bg);
-    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-    padding: 0 0.8rem;
-    height: 3.2rem;
-    border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
-    display: block;
-    padding-inline-end: 2rem;
     grid-row: 2/3;
-    grid-column: 2/4;
-    min-width: 5rem;
-    cursor: pointer; }
-    .sd-input .sd-input__select::placeholder {
-      color: var(--color-text-lighter);
-      font-weight: 400;
-      opacity: 0.75; }
-    .sd-input .sd-input__select:hover {
-      border-color: var(--color-input-border-hover);
-      background-color: var(--color-input-bg--hover); }
-    .sd-input .sd-input__select:focus {
-      box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
-      border-color: var(--sd-colour-interactive);
-      background-color: var(--sd-colour-interactive--alpha-20); }
-      .sd-input .sd-input__select:focus::placeholder {
-        opacity: 0.45; }
-    .sd-input .sd-input__select option {
-      color: inherit;
-      font-size: 1.4rem;
-      line-height: 2rem;
-      background-color: var(--color-dropdown-menu-Bg);
-      color: var(--color-dropdown-menu-text); }
+    grid-column: 2/4; }
   .sd-input.sd-input--is-select::after {
     position: relative;
     z-index: 1;
@@ -46860,24 +47059,14 @@ a.text-link {
   .sd-input .sd-input__hint,
   .sd-input .sd-input__message,
   .sd-input .sd-input__char-count {
-    font-size: 1.2rem;
-    line-height: 1.4rem;
-    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-    color: var(--color-text-light);
-    font-weight: 300;
-    margin: 0.5rem 0;
-    letter-spacing: 0.03em;
-    display: block; }
+    margin: 0.5rem 0; }
   .sd-input .sd-input__char-count {
-    font-size: 1.1rem;
-    font-weight: 400;
-    font-style: italic;
     grid-row: 3/4;
     grid-column: 3/4; }
-    .sd-input .sd-input__char-count--error {
-      color: #e41b21; }
   .sd-input .sd-input__label {
-    display: inline-block;
+    display: inline-flex;
+    align-items: flex-start;
+    justify-content: flex-start;
     font-size: 1.1rem;
     margin: 0 0.5rem 0 0;
     line-height: 1;
@@ -46904,15 +47093,15 @@ a.text-link {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      padding: 2px 8px 1px;
+      padding: 2px 8px;
       font-size: 1.1rem;
       font-family: "Roboto", Helvetica, Arial, sans-serif;
       font-weight: 400;
-      line-height: 1.8rem;
+      line-height: 2rem;
       text-transform: uppercase;
       font-style: normal;
       letter-spacing: 0.08em;
-      height: 1.8rem;
+      height: 2rem;
       transition: opacity ease 0.2s;
       justify-self: start;
       position: relative;
@@ -46967,7 +47156,7 @@ a.text-link {
     content: "*";
     vertical-align: top;
     font-size: 1.2rem;
-    padding-left: 0.3rem; }
+    padding-inline-start: 0.3rem; }
   .sd-input--required .sd-input__label.sd-input__label--boxed::after {
     position: absolute;
     inset-block-start: -4px;
@@ -47123,6 +47312,7 @@ a.text-link {
   height: 3.2rem;
   border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
   display: block;
+  position: relative;
   display: flex;
   gap: 2px;
   grid-row: 2/3;
@@ -47952,6 +48142,101 @@ label + .sd-radio {
 .form__item--auto-width .sd-input--grid-select .btn {
   margin-top: 0; }
 
+.input-wrap {
+  padding-top: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto auto auto;
+  grid-gap: 0;
+  position: relative;
+  align-self: stretch;
+  flex-grow: 1;
+  width: 100%;
+  row-gap: 0.4rem; }
+  .input-wrap .input-wrap__input-container,
+  .input-wrap .sd-input__input {
+    grid-row: 2/3;
+    grid-column: 2/4; }
+  .input-wrap .input-wrap__message-box {
+    grid-row: 3/4;
+    grid-column: 2/3; }
+  .input-wrap .input-wrap__icon-right {
+    grid-row: 2/3;
+    grid-column: 3/4;
+    z-index: 1; }
+  .input-wrap .sd-input__char-count {
+    grid-row: 3/4;
+    grid-column: 3/4;
+    z-index: 1;
+    font-size: 1.1rem;
+    font-weight: 400;
+    font-style: italic; }
+  .input-wrap .sd-input__label,
+  .input-wrap .form-label {
+    grid-row: 1/2;
+    grid-column: 2/3;
+    margin-bottom: 0 !important;
+    align-items: center;
+    justify-content: flex-start; }
+  .input-wrap .form-label--boxed {
+    margin-block: 2px !important; }
+  .input-wrap .icn-btn, .input-wrap .sd-thumb-carousel__btn--prev, .input-wrap .sd-thumb-carousel__btn--next,
+  .input-wrap .p-carousel-prev, .input-wrap .p-carousel-next {
+    grid-row: 1/2;
+    grid-column: 3/4; }
+  .input-wrap--inline-label {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto auto; }
+    .input-wrap--inline-label .sd-input__label,
+    .input-wrap--inline-label .form-label {
+      grid-row: 2/3;
+      grid-column: 1/2;
+      padding-inline-end: 1rem;
+      padding-inline-start: 0;
+      padding-block-start: 0.4rem;
+      padding-block-end: 0;
+      position: relative;
+      max-width: 260px;
+      min-width: 100px;
+      text-align: end;
+      position: relative;
+      align-self: center;
+      line-height: 1.2; }
+      .input-wrap--inline-label .sd-input__label::after,
+      .input-wrap--inline-label .form-label::after {
+        position: absolute;
+        z-index: 2;
+        inset-block-start: -2px;
+        inset-inline-end: 4px; }
+  .input-wrap--required .sd-input__label::after {
+    color: #e41b21;
+    content: "*";
+    vertical-align: top;
+    font-size: 1.2rem;
+    padding-left: 0.3rem; }
+  .input-wrap--required .sd-input__label.sd-input__label--boxed::after {
+    position: absolute;
+    inset-block-start: -4px;
+    inset-inline-end: -10px; }
+  .input-wrap--disabled .sd-input__label,
+  .input-wrap--disabled .sd-input__message-box,
+  .input-wrap--disabled .sd-input__char-count {
+    opacity: 0.5 !important;
+    pointer-events: none !important; }
+  .input-wrap--disabled .sd-input__hint,
+  .input-wrap--disabled .sd-input__message,
+  .input-wrap--disabled .sd-input__char-count {
+    pointer-events: none; }
+  .input-wrap--no-label {
+    grid-template-rows: auto auto auto; }
+  .input-wrap--medium.sd-input--boxed-style .sd-input__input,
+  .input-wrap--medium.sd-input--boxed-style .sd-input__select {
+    border-radius: var(--b-radius--medium); }
+    .input-wrap--medium.sd-input--boxed-style .sd-input__input:focus,
+    .input-wrap--medium.sd-input--boxed-style .sd-input__select:focus {
+      box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20); }
+
 .sd-sidebar-menu {
   position: absolute;
   bottom: 0;
@@ -58844,11 +59129,11 @@ i.sd-sidetab-menu__helper-icon {
     box-sizing: content-box;
     line-height: 100%;
     color: #9b27b0;
-    right: -0.5rem;
-    bottom: -0.7rem;
+    inset-inline-end: -0.4rem;
+    inset-block-end: -0.6rem;
     height: 1em;
     width: 1em;
-    background-color: var(--sd-item__main-Bg);
+    background-color: var(--sd-item__main-Bg) !important;
     border-radius: var(--b-radius--full);
     padding: 1px;
     z-index: 1;
@@ -58864,8 +59149,8 @@ i.sd-sidetab-menu__helper-icon {
       font-size: 32px; }
     .icn-mix--2x .icn-mix__sub-icn {
       font-size: 1.6rem;
-      right: -0.6rem;
-      bottom: -0.3rem; }
+      inset-inline-end: -0.6rem;
+      inset-block-end: -0.3rem; }
 
 .double-size-icn {
   display: inline-block;
@@ -58882,13 +59167,13 @@ i.sd-sidetab-menu__helper-icon {
     opacity: 0.5; }
 
 .subnav .icn-mix__sub-icn {
-  background-color: var(--sd-colour-panel-bg--100); }
+  background-color: var(--sd-colour-panel-bg--100) !important; }
 
 .subnav--darker .icn-mix__sub-icn {
-  background-color: var(--sd-colour-panel-bg--200); }
+  background-color: var(--sd-colour-panel-bg--200) !important; }
 
 .subnav--dark-blue-grey .icn-mix__sub-icn {
-  background-color: var(--color-subnav-bg--blueGrey-10);
+  background-color: var(--color-subnav-bg--blueGrey-10) !important;
   color: #d686e4; }
 
 .subnav--dark-blue-grey .icn-mix__icn {
@@ -59962,7 +60247,8 @@ i.sd-sidetab-menu__helper-icon {
 .p-dialog-mask.p-component-overlay {
   background-color: rgba(35, 40, 46, 0.5) !important;
   backdrop-filter: blur(1px);
-  -webkit-backdrop-filter: blur(1px); }
+  -webkit-backdrop-filter: blur(1px);
+  z-index: 1000; }
 
 .p-dialog-mask {
   position: fixed;
@@ -60277,12 +60563,13 @@ i.sd-sidetab-menu__helper-icon {
   padding: .8rem 1.6rem;
   min-width: 100px;
   font-size: 14px;
-  color: var(--color-text); }
+  color: var(--color-text);
+  width: 100%; }
   .p-menuitem-link:hover, .p-menuitem-link:focus-visible {
     background: var(--sd-colour-interactive--alpha-20); }
-
-.p-menuitem-icon {
-  margin-right: 0.8rem; }
+  .p-menuitem-link .p-menuitem-icon {
+    margin-right: 0.8rem;
+    color: var(--color-icon-default); }
 
 .sd-avatar {
   display: inline-block;