primeng 17.14.1 → 17.16.0

package/resources/themes/soho-dark/theme.css

@@ -757,6 +757,15 @@
   .p-cascadeselect.p-invalid.p-component {
     border-color: #ff9a9a;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #3e4053;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #3e4053;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #3e4053;
+  }
 
   .p-cascadeselect-panel {
     background: #282936;
@@ -873,6 +882,18 @@
     background: #9378f4;
     color: #1c1d26;
   }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #3e4053;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #b19df7;
+  }
+  .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+    background-color: #3e4053;
+  }
+  .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #9378f4;
+  }
 
   p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
     border-color: #ff9a9a;
@@ -1012,6 +1033,15 @@
   .p-dropdown.p-invalid.p-component {
     border-color: #ff9a9a;
   }
+  .p-dropdown.p-variant-filled {
+    background-color: #3e4053;
+  }
+  .p-dropdown.p-variant-filled:enabled:hover {
+    background-color: #3e4053;
+  }
+  .p-dropdown.p-variant-filled:enabled:focus {
+    background-color: #3e4053;
+  }
 
   .p-dropdown-panel {
     background: #282936;
@@ -1195,6 +1225,16 @@
     right: 0.75rem;
   }
 
+  .p-inputmask.p-variant-filled {
+    background-color: #3e4053;
+  }
+  .p-inputmask.p-variant-filled:enabled:hover {
+    background-color: #3e4053;
+  }
+  .p-inputmask.p-variant-filled:enabled:focus {
+    background-color: #3e4053;
+  }
+
   p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
     border-color: #ff9a9a;
   }
@@ -1214,6 +1254,16 @@
     right: 3.75rem;
   }
 
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input {
+    background-color: #3e4053;
+  }
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover {
+    background-color: #3e4053;
+  }
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus {
+    background-color: #3e4053;
+  }
+
   .p-inputotp {
     display: flex;
     align-items: center;
@@ -1292,6 +1342,15 @@
   .p-inputtext.ng-dirty.ng-invalid {
     border-color: #ff9a9a;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #3e4053;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #3e4053;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #3e4053;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1508,8 +1567,17 @@
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
   }
+  .p-multiselect.p-variant-filled {
+    background: #3e4053;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3e4053;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3e4053;
+  }
 
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  .p-inputwrapper-filled .p-multiselect.p-multiselect-chip .p-multiselect-label {
     padding: 0.375rem 0.75rem;
   }
 
@@ -1707,6 +1775,18 @@
     background: #9378f4;
     color: #1c1d26;
   }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #3e4053;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover {
+    background-color: #3e4053;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight {
+    background: #b19df7;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+    background: #9378f4;
+  }
 
   p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
     border-color: #ff9a9a;
@@ -1821,9 +1901,12 @@
     margin-left: -0.5715rem;
   }
   .p-slider.p-slider-vertical {
+    height: 100%;
     width: 0.286rem;
   }
   .p-slider.p-slider-vertical .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
     margin-left: -0.5715rem;
     margin-bottom: -0.5715rem;
   }
@@ -1938,6 +2021,15 @@
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
   }
+  .p-treeselect.p-variant-filled {
+    background-color: #3e4053;
+  }
+  .p-treeselect.p-variant-filled:enabled:hover {
+    background-color: #3e4053;
+  }
+  .p-treeselect.p-variant-filled:enabled:focus {
+    background-color: #3e4053;
+  }
 
   p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
     border-color: #ff9a9a;
@@ -3441,6 +3533,18 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #3e4053;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #b19df7;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover {
+    background-color: #3e4053;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #9378f4;
+  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: rgba(177, 157, 247, 0.16);
     color: #b19df7;
@@ -3638,6 +3742,18 @@
   .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #3e4053;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #b19df7;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover {
+    background-color: #3e4053;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #9378f4;
+  }
   .p-treetable .p-treetable-tbody > tr:focus-visible {
     outline: 0.15rem solid #e0d8fc;
     outline-offset: -0.15rem;

package/resources/themes/soho-light/theme.css

@@ -757,6 +757,15 @@
   .p-cascadeselect.p-invalid.p-component {
     border-color: #ff6767;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f6f9fc;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f6f9fc;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
 
   .p-cascadeselect-panel {
     background: #ffffff;
@@ -873,6 +882,18 @@
     background: #5935f1;
     color: #ffffff;
   }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f6f9fc;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #7254f3;
+  }
+  .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+    background-color: #f6f9fc;
+  }
+  .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #5935f1;
+  }
 
   p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
     border-color: #ff6767;
@@ -1012,6 +1033,15 @@
   .p-dropdown.p-invalid.p-component {
     border-color: #ff6767;
   }
+  .p-dropdown.p-variant-filled {
+    background-color: #f6f9fc;
+  }
+  .p-dropdown.p-variant-filled:enabled:hover {
+    background-color: #f6f9fc;
+  }
+  .p-dropdown.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1195,6 +1225,16 @@
     right: 0.75rem;
   }
 
+  .p-inputmask.p-variant-filled {
+    background-color: #f6f9fc;
+  }
+  .p-inputmask.p-variant-filled:enabled:hover {
+    background-color: #f6f9fc;
+  }
+  .p-inputmask.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+
   p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
     border-color: #ff6767;
   }
@@ -1214,6 +1254,16 @@
     right: 3.75rem;
   }
 
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input {
+    background-color: #f6f9fc;
+  }
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover {
+    background-color: #f6f9fc;
+  }
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus {
+    background-color: #ffffff;
+  }
+
   .p-inputotp {
     display: flex;
     align-items: center;
@@ -1292,6 +1342,15 @@
   .p-inputtext.ng-dirty.ng-invalid {
     border-color: #ff6767;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f6f9fc;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f6f9fc;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1508,8 +1567,17 @@
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
   }
+  .p-multiselect.p-variant-filled {
+    background: #f6f9fc;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f6f9fc;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
 
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  .p-inputwrapper-filled .p-multiselect.p-multiselect-chip .p-multiselect-label {
     padding: 0.375rem 0.75rem;
   }
 
@@ -1707,6 +1775,18 @@
     background: #5935f1;
     color: #ffffff;
   }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f6f9fc;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover {
+    background-color: #f6f9fc;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight {
+    background: #7254f3;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+    background: #5935f1;
+  }
 
   p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
     border-color: #ff6767;
@@ -1821,9 +1901,12 @@
     margin-left: -0.5715rem;
   }
   .p-slider.p-slider-vertical {
+    height: 100%;
     width: 0.286rem;
   }
   .p-slider.p-slider-vertical .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
     margin-left: -0.5715rem;
     margin-bottom: -0.5715rem;
   }
@@ -1938,6 +2021,15 @@
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
   }
+  .p-treeselect.p-variant-filled {
+    background-color: #f6f9fc;
+  }
+  .p-treeselect.p-variant-filled:enabled:hover {
+    background-color: #f6f9fc;
+  }
+  .p-treeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
 
   p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
     border-color: #ff6767;
@@ -3441,6 +3533,18 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: #043d75;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f6f9fc;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #7254f3;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover {
+    background-color: #f6f9fc;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #5935f1;
+  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: #e2dcfc;
     color: #7254f3;
@@ -3638,6 +3742,18 @@
   .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: #043d75;
   }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f6f9fc;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #7254f3;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover {
+    background-color: #f6f9fc;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #5935f1;
+  }
   .p-treetable .p-treetable-tbody > tr:focus-visible {
     outline: 0.15rem solid #c7bbfa;
     outline-offset: -0.15rem;

package/resources/themes/tailwind-light/theme.css

@@ -771,6 +771,15 @@
   .p-cascadeselect.p-invalid.p-component {
     border-color: #f0a9a7;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #fafafa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #fafafa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
 
   .p-cascadeselect-panel {
     background: #ffffff;
@@ -887,6 +896,18 @@
     background: #4f46e5;
     color: #ffffff;
   }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #fafafa;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #4f46e5;
+  }
+  .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+    background-color: #fafafa;
+  }
+  .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #4f46e5;
+  }
 
   p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
     border-color: #f0a9a7;
@@ -1026,6 +1047,15 @@
   .p-dropdown.p-invalid.p-component {
     border-color: #f0a9a7;
   }
+  .p-dropdown.p-variant-filled {
+    background-color: #fafafa;
+  }
+  .p-dropdown.p-variant-filled:enabled:hover {
+    background-color: #fafafa;
+  }
+  .p-dropdown.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1209,6 +1239,16 @@
     right: 0.75rem;
   }
 
+  .p-inputmask.p-variant-filled {
+    background-color: #fafafa;
+  }
+  .p-inputmask.p-variant-filled:enabled:hover {
+    background-color: #fafafa;
+  }
+  .p-inputmask.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+
   p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
     border-color: #f0a9a7;
   }
@@ -1228,6 +1268,16 @@
     right: 3.75rem;
   }
 
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input {
+    background-color: #fafafa;
+  }
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover {
+    background-color: #fafafa;
+  }
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus {
+    background-color: #ffffff;
+  }
+
   .p-inputotp {
     display: flex;
     align-items: center;
@@ -1306,6 +1356,15 @@
   .p-inputtext.ng-dirty.ng-invalid {
     border-color: #f0a9a7;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #fafafa;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #fafafa;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1522,8 +1581,17 @@
     border-top-right-radius: 0.375rem;
     border-bottom-right-radius: 0.375rem;
   }
+  .p-multiselect.p-variant-filled {
+    background: #fafafa;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #fafafa;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
 
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  .p-inputwrapper-filled .p-multiselect.p-multiselect-chip .p-multiselect-label {
     padding: 0.375rem 0.75rem;
   }
 
@@ -1721,6 +1789,18 @@
     background: #4f46e5;
     color: #ffffff;
   }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #fafafa;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover {
+    background-color: #fafafa;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight {
+    background: #4f46e5;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+    background: #4f46e5;
+  }
 
   p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
     border-color: #f0a9a7;
@@ -1835,9 +1915,12 @@
     margin-left: -0.5715rem;
   }
   .p-slider.p-slider-vertical {
+    height: 100%;
     width: 0.286rem;
   }
   .p-slider.p-slider-vertical .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
     margin-left: -0.5715rem;
     margin-bottom: -0.5715rem;
   }
@@ -1952,6 +2035,15 @@
     border-top-right-radius: 0.375rem;
     border-bottom-right-radius: 0.375rem;
   }
+  .p-treeselect.p-variant-filled {
+    background-color: #fafafa;
+  }
+  .p-treeselect.p-variant-filled:enabled:hover {
+    background-color: #fafafa;
+  }
+  .p-treeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
 
   p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
     border-color: #f0a9a7;
@@ -3455,6 +3547,18 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: #3f3f46;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #fafafa;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #4f46e5;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover {
+    background-color: #fafafa;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #4f46e5;
+  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: #eef2ff;
     color: #312e81;
@@ -3652,6 +3756,18 @@
   .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: #3f3f46;
   }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #fafafa;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #4f46e5;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover {
+    background-color: #fafafa;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #4f46e5;
+  }
   .p-treetable .p-treetable-tbody > tr:focus-visible {
     outline: 0.15rem solid #6366f1;
     outline-offset: -0.15rem;