@transferwise/components 46.165.2 → 46.165.3

package/src/styles/less/sequences.css

@@ -4,9 +4,7 @@
   margin-inline-start: 25px;
   margin-block-start: 0;
   margin-block-end: 0;
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
-  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence > li {
@@ -83,7 +81,6 @@
 @media (min-width: 840px) {
   .sequence {
     padding-inline-end: 24px;
-    font-size: 1rem;
     font-size: var(--font-size-16);
   }
 }
@@ -91,16 +88,13 @@
   display: block;
   line-height: 24px;
   position: relative;
-  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence > li > a {
   display: block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
-  color: #0097c7;
   color: var(--color-content-accent);
   outline-offset: -1px;
 }
@@ -108,11 +102,9 @@
 .sequence > li > a:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .sequence > li > a:active {
-  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 .sequence > li p {
@@ -156,7 +148,6 @@
   border-color: inherit;
   outline: 0;
   border-width: 0;
-  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   background-size: 200% 200%;
   background-position: 0 0%;
@@ -167,47 +158,38 @@
 .sequence > .active > a {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #37517e;
   color: var(--color-content-primary);
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
 .sequence > .active > a:hover,
 .sequence > .active > a:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .sequence > .active > a:active {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .sequence > .active::before {
-  border-color: #0097c7;
   border-color: var(--color-content-accent);
 }
 .sequence > .active::after,
 .sequence > .active ~ li::after {
-  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   background-image: none;
 }
 .sequence > .active ~ li::before {
-  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence a {
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
 .sequence-top > li:first-child::after {
   inset-block-start: 0;
 }
 .sequence-inverse > li {
-  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence-inverse > li > a {
@@ -222,7 +204,6 @@
 .sequence-inverse > .active .small,
 .sequence-inverse > .active .body-2,
 .sequence-inverse > .active .np-text-body-default {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .sequence-inverse > .active::after,
@@ -234,21 +215,16 @@
   border-color: #37517e;
 }
 .sequence-info > li {
-  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .sequence-info > li::after {
-  background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-info.sequence-inverse > li::after {
-  background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-info > .active::before {
-  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 @keyframes sequence-pip-info {
@@ -256,7 +232,6 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
-    border-color: #00a2dd;
     border-color: var(--color-interactive-accent);
   }
 }
@@ -264,7 +239,6 @@
   border-color: #37517e;
 }
 .sequence-primary > li::after {
-  background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(#37517e 0, #37517e 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-primary.sequence-inverse > li::after {
@@ -283,21 +257,16 @@
   }
 }
 .sequence-success > li {
-  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
 }
 .sequence-success > li::after {
-  background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-success.sequence-inverse > li::after {
-  background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-success > .active::before {
-  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
-  background-color: #2ead4b;
   background-color: var(--color-interactive-positive);
 }
 @keyframes sequence-pip-success {
@@ -305,26 +274,20 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
-    border-color: #2ead4b;
     border-color: var(--color-interactive-positive);
   }
 }
 .sequence-warning > li {
-  border-color: #df8700;
   border-color: var(--color-interactive-warning);
 }
 .sequence-warning > li::after {
-  background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-warning.sequence-inverse > li::after {
-  background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-warning > .active::before {
-  border-color: #df8700;
   border-color: var(--color-interactive-warning);
-  background-color: #df8700;
   background-color: var(--color-interactive-warning);
 }
 @keyframes sequence-pip-warning {
@@ -332,26 +295,20 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
-    border-color: #df8700;
     border-color: var(--color-interactive-warning);
   }
 }
 .sequence-danger > li {
-  border-color: #e74848;
   border-color: var(--color-interactive-negative);
 }
 .sequence-danger > li::after {
-  background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-danger.sequence-inverse > li::after {
-  background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-danger > .active::before {
-  border-color: #e74848;
   border-color: var(--color-interactive-negative);
-  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 @keyframes sequence-pip-danger {
@@ -359,20 +316,17 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
-    border-color: #e74848;
     border-color: var(--color-interactive-negative);
   }
 }
 .sequence-hollow > li::before {
   border-width: 2px;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .sequence-hollow > .active::before {
   border-width: 4px;
 }
 .sequence-hollow > .active ~ li::before {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .sequence-hollow.sequence-inverse > li::before {
@@ -382,7 +336,6 @@
   position: absolute;
   display: block;
   margin-inline-start: -35px;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-radius: 50%;
   inline-size: 24px;
@@ -393,14 +346,11 @@
   text-decoration: none !important;
   border-width: 1px;
   border-style: solid;
-  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
   inset-block-start: 4px;
-  font-size: 0.75rem;
   font-size: var(--font-size-12);
 }
 .sequence-icon .icon {
-  font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 23px;
 }
@@ -409,16 +359,12 @@
   border-color: #ffffff;
 }
 .sequence a .sequence-icon {
-  color: #0097c7;
   color: var(--color-content-accent);
-  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .sequence a:hover .sequence-icon,
 .sequence a:focus .sequence-icon {
-  color: #0084b3;
   color: var(--color-content-accent-hover);
-  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .sequence-table {
@@ -433,9 +379,7 @@
 .sequence-table > li > .sequence-table-td,
 .sequence-table > li > .sequence-table-th {
   display: table-cell;
-  padding-block: 4px;
   padding-block: var(--size-4);
-  padding-inline: 12px;
   padding-inline: var(--size-12);
   padding-inline-start: 0;
 }
@@ -444,7 +388,6 @@
   padding-inline-end: 0;
 }
 .sequence-table > li > .sequence-table-th {
-  color: #37517e;
   color: var(--color-content-primary);
   white-space: nowrap;
 }
@@ -492,7 +435,6 @@
 }
 .sequence-inverse > li > .sequence-table-th,
 .sequence-inverse > li > .sequence-table-td {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .sequence-icon-md {
@@ -500,7 +442,6 @@
   block-size: 32px;
   line-height: 30px;
   margin-block-start: -6px;
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
 }
 .sequence-icon-lg {
@@ -508,7 +449,6 @@
   block-size: 40px;
   line-height: 38px;
   margin-block-start: -6px;
-  font-size: 1rem;
   font-size: var(--font-size-16);
 }
 .sequence-icon-lg .icon {

package/src/styles/less/table.css

@@ -1,5 +1,4 @@
 table {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-collapse: separate;
 }
@@ -12,7 +11,6 @@ table th[class*="col-"] {
 caption {
   padding-block-start: 16px;
   padding-block-end: 16px;
-  color: #5d7079;
   color: var(--color-content-secondary);
   text-align: start;
 }
@@ -22,7 +20,6 @@ th {
 .table {
   inline-size: 100%;
   max-inline-size: 100%;
-  margin-block-end: 24px;
   margin-block-end: var(--size-24);
 }
 .table > thead > tr > th,
@@ -31,15 +28,10 @@ th {
 .table > thead > tr > td,
 .table > tbody > tr > td,
 .table > tfoot > tr > td {
-  padding-block: 24px;
   padding-block: var(--size-24);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  line-height: 1.5;
   line-height: var(--line-height-body);
   vertical-align: top;
-  border-block-start: 1px solid rgba(0,0,0,0.10196);
-  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
   transition: border ease 0.15s;
@@ -47,15 +39,10 @@ th {
 .table > .thead > ol > li,
 .table > .tbody > dl > dd,
 .table > .tfoot > ol > li {
-  padding-block: 24px;
   padding-block: var(--size-24);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  line-height: 1.5;
   line-height: var(--line-height-body);
   vertical-align: top;
-  border-block-start: 1px solid rgba(0,0,0,0.10196);
-  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
   transition: border ease 0.15s;
@@ -85,31 +72,24 @@ th {
   border-block-start: 0;
 }
 .table > tbody + tbody {
-  border-block-start: 1px solid rgba(0,0,0,0.10196);
-  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
 }
 .table .table {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .table > thead,
 .table > tfoot,
 .table > .thead,
 .table > .tfoot {
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .table > tbody,
 .table > .tbody {
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
 }
 .table > tbody > tr > th,
 .table > .tbody > dl > .th {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .table-condensed > thead > tr > th,
@@ -118,22 +98,18 @@ th {
 .table-condensed > thead > tr > td,
 .table-condensed > tbody > tr > td,
 .table-condensed > tfoot > tr > td {
-  padding: 8px;
   padding: var(--size-8);
 }
 .table-condensed > .thead > ol > li,
 .table-condensed > .tbody > dl > dd {
-  padding: 8px;
   padding: var(--size-8);
 }
 .table-bordered {
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
   border-radius: 3px;
 }
 .table-bordered thead,
 .table-bordered .thead {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 @media (max-width: 839.98px) {
@@ -142,12 +118,10 @@ th {
   }
 }
 .table-striped > tbody > tr:nth-of-type(odd) {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 @media (min-width: 840px) {
   .table-striped > .tbody > dl:nth-of-type(odd) {
-    background-color: rgba(134,167,189,0.10196);
     background-color: var(--color-background-neutral);
   }
 }
@@ -189,7 +163,6 @@ table col[class*="col-"] {
 .table > thead > tr.active > th,
 .table > tbody > tr.active > th,
 .table > tfoot > tr.active > th {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .table-hover > tbody > tr > td.active:hover,
@@ -197,7 +170,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.active:hover > td,
 .table-hover > tbody > tr:hover > .active,
 .table-hover > tbody > tr.active:hover > th {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .table > thead > tr > td.success,
@@ -212,7 +184,6 @@ table col[class*="col-"] {
 .table > thead > tr.success > th,
 .table > tbody > tr.success > th,
 .table > tfoot > tr.success > th {
-  background-color: rgba(54,199,151,0.10196);
   background-color: var(--color-background-positive);
 }
 .table-hover > tbody > tr > td.success:hover,
@@ -220,7 +191,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.success:hover > td,
 .table-hover > tbody > tr:hover > .success,
 .table-hover > tbody > tr.success:hover > th {
-  background-color: rgba(54,199,151,0.10196);
   background-color: var(--color-background-positive);
 }
 .table > thead > tr > td.info,
@@ -235,7 +205,6 @@ table col[class*="col-"] {
 .table > thead > tr.info > th,
 .table > tbody > tr.info > th,
 .table > tfoot > tr.info > th {
-  background-color: rgba(56,200,255,0.10196);
   background-color: var(--color-background-accent);
 }
 .table-hover > tbody > tr > td.info:hover,
@@ -243,7 +212,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.info:hover > td,
 .table-hover > tbody > tr:hover > .info,
 .table-hover > tbody > tr.info:hover > th {
-  background-color: rgba(56,200,255,0.10196);
   background-color: var(--color-background-accent);
 }
 .table > thead > tr > td.warning,
@@ -258,7 +226,6 @@ table col[class*="col-"] {
 .table > thead > tr.warning > th,
 .table > tbody > tr.warning > th,
 .table > tfoot > tr.warning > th {
-  background-color: rgba(255,172,0,0.10196);
   background-color: var(--color-background-warning);
 }
 .table-hover > tbody > tr > td.warning:hover,
@@ -266,7 +233,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.warning:hover > td,
 .table-hover > tbody > tr:hover > .warning,
 .table-hover > tbody > tr.warning:hover > th {
-  background-color: rgba(255,172,0,0.10196);
   background-color: var(--color-background-warning);
 }
 .table > thead > tr > td.danger,
@@ -281,7 +247,6 @@ table col[class*="col-"] {
 .table > thead > tr.danger > th,
 .table > tbody > tr.danger > th,
 .table > tfoot > tr.danger > th {
-  background-color: rgba(255,135,135,0.10196);
   background-color: var(--color-background-negative);
 }
 .table-hover > tbody > tr > td.danger:hover,
@@ -289,7 +254,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.danger:hover > td,
 .table-hover > tbody > tr:hover > .danger,
 .table-hover > tbody > tr.danger:hover > th {
-  background-color: rgba(255,135,135,0.10196);
   background-color: var(--color-background-negative);
 }
 .table > thead > tr > td.default,
@@ -323,7 +287,6 @@ table col[class*="col-"] {
 @media screen and (max-width: 839.98px) {
   .table-responsive {
     inline-size: 100%;
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
     overflow-y: hidden;
     -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -349,7 +312,6 @@ table col[class*="col-"] {
     border-block-end: 0;
   }
   .table-responsive.table-bordered {
-    border: 1px solid rgba(134,167,189,0.10196);
     border: 1px solid var(--color-background-neutral);
     border-radius: 3px;
   }
@@ -366,9 +328,7 @@ table col[class*="col-"] {
   }
   .table > .thead > ol > li {
     display: table-cell;
-    font-weight: 700;
     font-weight: var(--font-weight-bold);
-    color: #37517e;
     color: var(--color-content-primary);
   }
   .table > .tbody {
@@ -382,9 +342,7 @@ table col[class*="col-"] {
   }
   .table > .tbody > dl > dd {
     display: table-cell;
-    font-size: 0.875rem;
     font-size: var(--font-size-14);
-    color: #5d7079;
     color: var(--color-content-secondary);
   }
   .table > .tfoot {
@@ -396,14 +354,10 @@ table col[class*="col-"] {
     display: none;
   }
   .table > .tbody > dl {
-    border: 1px #c9cbce solid;
     border: 1px var(--color-interactive-secondary) solid;
     border-radius: 3px;
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
-    padding-block: 24px 0;
     padding-block: var(--size-24) 0;
-    padding-inline: 1.5;
     padding-inline: var(--line-height-body);
   }
   .table > .tbody > dl > dd {
@@ -442,7 +396,6 @@ table col[class*="col-"] {
   color: #ffffff;
 }
 .table-calendar > tbody > tr > td > a:not([disabled]):hover {
-  background-color: #0097c7;
   background-color: var(--color-content-accent);
   color: #fff;
 }

package/src/styles/less/tick.css

@@ -8,7 +8,6 @@
 .tw-checkbox-check::after {
   content: "";
   position: absolute;
-  background: #ffffff;
   background: var(--color-background-screen);
   transform: translateX(-1.5px) rotate(-45deg);
   transform-origin: left bottom;
@@ -20,7 +19,6 @@
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {
-  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 .tw-checkbox-check::before {

package/src/styles/less/tooltip.css

@@ -2,13 +2,11 @@
   position: absolute;
   z-index: 1070;
   display: block;
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
   line-break: auto;
-  line-height: 24px;
   line-height: var(--size-24);
   text-align: start;
   -webkit-text-decoration: none;
@@ -45,23 +43,17 @@
   padding-inline: 5px;
 }
 .tooltip-inner {
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
   letter-spacing: -0.006em;
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;
-  padding-block: 16px;
   padding-block: var(--size-16);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  color: #37517e;
   color: var(--color-content-primary);
   text-align: center;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-radius: 3px;
   box-shadow: 0 1px 28px 0 rgba(34, 48, 73, 0.2);
@@ -112,7 +104,6 @@
   margin-inline-start: -5px;
   border-block-width: 5px 0;
   border-inline-width: 5px;
-  border-block-start-color: #ffffff;
   border-block-start-color: var(--color-background-screen);
 }
 .tooltip.right .tooltip-arrow {
@@ -121,7 +112,6 @@
   margin-block-start: -5px;
   border-block-width: 5px 5px;
   border-inline-width: 0 5px;
-  border-inline-end-color: #ffffff;
   border-inline-end-color: var(--color-background-screen);
 }
 .tooltip.left .tooltip-arrow {
@@ -130,7 +120,6 @@
   margin-block-start: -5px;
   border-block-width: 5px 5px;
   border-inline-width: 5px 0;
-  border-inline-start-color: #ffffff;
   border-inline-start-color: var(--color-background-screen);
 }
 .tooltip.bottom .tooltip-arrow {
@@ -139,7 +128,6 @@
   margin-inline-start: -5px;
   border-block-width: 0 5px;
   border-inline-width: 5px;
-  border-block-end-color: #ffffff;
   border-block-end-color: var(--color-background-screen);
 }
 [data-toggle="tooltip"]:not(.btn) {
@@ -147,7 +135,6 @@
 }
 [data-toggle="tooltip"]:not(.btn):hover,
 [data-toggle="tooltip"]:not(.btn):focus {
-  color: #0084b3 !important;
   color: var(--color-content-accent-hover) !important;
   outline: 0;
 }