/* Shared transaction status cards, including the independently deployed B2B layout. */
:root {
  --summary-all:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M9%208h6M9%2012h6M9%2016h3%22%2F%3E%3C%2Fsvg%3E");
  --summary-processing:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E");
  --summary-success:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8%2012%203%203%205-6%22%2F%3E%3C%2Fsvg%3E");
  --summary-failed:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206M15%209l-6%206%22%2F%3E%3C%2Fsvg%3E");
  --summary-attention:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m10.3%204-8%2014a2%202%200%200%200%201.7%203h16a2%202%200%200%200%201.7-3l-8-14a2%202%200%200%200-3.4%200Z%22%2F%3E%3Cpath%20d%3D%22M12%209v4M12%2017h.01%22%2F%3E%3C%2Fsvg%3E");
  --summary-cancelled:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E");
  --summary-held:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2210%22%20width%3D%2214%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2010V7a4%204%200%200%201%208%200v3M12%2014v3%22%2F%3E%3C%2Fsvg%3E")
}

:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article) {
  box-sizing:border-box;
  min-width:0;
  min-height:112px;
  height:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  --summary-icon:var(--summary-all);
  --summary-icon-color:#52637d
}

:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article)>:is(span,dt) {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  min-height:21px;
  font-size:13px;
  line-height:1.5;
  overflow-wrap:anywhere
}

:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article)>strong,:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article)>dd>strong {
  display:block;
  margin:0;
  font-size:28px;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}

:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article)>strong,:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article)>dd {
  margin:0;
  margin-top:auto
}

:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article)>small,:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article)>dd>small {
  display:block;
  margin:0;
  font-size:12px;
  line-height:1.5
}

:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article):has(>small),:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article):has(>dd>small) {
  min-height:140px
}

:is(.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article)>:is(span,dt)::before {
  content:"";
  display:block;
  flex:0 0 18px;
  width:18px;
  height:18px;
  background-color:var(--summary-icon-color);
  mask:var(--summary-icon) center/contain no-repeat;
  -webkit-mask:var(--summary-icon) center/contain no-repeat
}

:is(.bm-metrics>[data-state="processing"],.bm-metrics>[data-state="accepted"],.bulk-counter-grid>[data-tone="info"],.bulk-counter-grid>[data-tone="neutral"],.order-summary>[data-tone="active"]):is([class],[data-state],[data-tone]) {
  --summary-icon:var(--summary-processing);
  --summary-icon-color:#3152bd
}

:is(.bm-metrics>[data-state="succeeded"],.bulk-counter-grid>[data-tone="success"],.order-summary>[data-tone="success"],.orders-metrics>.succeeded,.topup-metrics>.paid,.topup-metrics>.credited):is([class],[data-state],[data-tone]) {
  --summary-icon:var(--summary-success);
  --summary-icon-color:#008069
}

:is(.bm-metrics>[data-state="failed"],.bulk-counter-grid>[data-tone="critical"],.orders-metrics>.failed):is([class],[data-state],[data-tone]) {
  --summary-icon:var(--summary-failed);
  --summary-icon-color:#bd3039
}

:is(.bm-metrics>[data-state="attention_required"],.bulk-counter-grid>[data-tone="warning"],.order-summary>[data-tone="attention"],.order-summary>[data-tone="neutral"],.orders-metrics>.attention,.topup-metrics>.attention):is([class],[data-state],[data-tone]) {
  --summary-icon:var(--summary-attention);
  --summary-icon-color:#9a6900
}

:is(.bm-metrics>[data-state="cancelled"]):is([class],[data-state],[data-tone]) {
  --summary-icon:var(--summary-cancelled);
  --summary-icon-color:#63738b
}

:is(.orders-metrics>.orders-metric:not(.all,.succeeded,.failed,.attention)):is([class],[data-state],[data-tone]) {
  --summary-icon:var(--summary-held);
  --summary-icon-color:#52637d
}

@media(max-width:650px) {
  :is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article) {
  min-height:108px;
  padding:14px;
  gap:10px
}
:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article)>strong,:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article)>dd>strong {
  font-size:26px
}
:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article):has(>small),:is(.tx-metrics,.bm-metrics,.orders-metrics,.topup-metrics,.bulk-counter-grid,.order-summary)[class]>:is(div,article):has(>dd>small) {
  min-height:136px
}

}