.card-kpi {
  border-left: 4px solid var(--bs-secondary);
  height: 100%;
  padding: 0.75rem;
}

/* We currently ship this CSS file with the package, so the font definitions need to live here at the moment.
The file fonts/material-symbols-outlined.woff2 is created using `hatch run download-static-files`.
Note the relative url works with both serve_locally=True and serve_locally=False through the CDN.
*/
@font-face {
  font-display: block;
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/material-symbols-outlined.woff2") format("woff2");
}

.material-symbols-outlined {
  direction: ltr;
  display: inline-block;
  font-family: 'Material Symbols Outlined', sans-serif;
  font-feature-settings: 'liga';
  font-size: 24px;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
}

.card-kpi .material-symbols-outlined {
  margin: auto 0;
}

/* This should be replaced, when the bootstrap theme is finalized. Currently our font tokens don't match with the
 bootstrap font tokens, leading to deviations which we need to overwrite. */
.card-kpi-title {
  font-size: 1rem;
  margin: 0;
}

.card-kpi .card-header,
.card-kpi .card-footer,
.card-kpi .card-body {
  align-items: center;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

.card-kpi .card-header {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.card-kpi .card-body {
  align-items: center;
  color: var(--bs-secondary);
  display: flex;
  flex-grow: 1;
  font-size: 1.5rem;
  font-weight: 600;
}

.card-kpi .card-footer {
  color: var(--bs-secondary);
  display: flex;
  font-weight: 600;
  gap: 0.25rem;
}

.card-kpi .card-footer .material-symbols-outlined {
  font-size: 1.25rem;
}

.card-kpi .color-pos.card-footer {
  color: var(--bs-blue);
}

.card-kpi .color-neg.card-footer {
  color: var(--bs-pink);
}

.card-kpi:has(.color-pos) {
  border-left: 4px solid var(--bs-blue);
}

.card-kpi:has(.color-neg) {
  border-left: 4px solid var(--bs-pink);
}