.b-taskboardbase{
  --thickness:8px;
  --mix:#fff;
  --panel-background-color:#fff;
  --label-width:7em;
  --taskboard-body-padding:1em;
  --taskboard-header-text-transform:none;
  --taskboard-column-gap:.75em;
  --taskboard-column-padding:.75em;
  --taskboard-column-header-border-radius:var(--thickness) var(--thickness) 0 0;
  --taskboard-column-border-radius:0 0 var(--thickness) var(--thickness);
  --taskboard-card-border-top-radius:var(--thickness);
  --taskboard-card-border-bottom-radius:var(--thickness);
  --taskboard-card-border-top:var(--thickness) solid color-mix(in oklab, currentColor, var(--mix) 50%);
  --taskboard-progressitem-height:auto;
  --taskboard-progressitem-color:color-mix(in oklab, currentColor, var(--mix) 30%);
}

.b-theme-classic-dark{
  --mix:#000;
}

.b-taskboard-column-header-padder::before{
  content:"";
  background:color-mix(in oklab, currentColor, var(--mix) 30%);
  width:1em;
  height:1em;
  border-radius:3px;
  margin-inline-end:-0.5em;
  align-self:center;
}

.b-taskboard-progress::before{
  display:block;
  width:var(--label-width);
  overflow:clip;
  flex-shrink:0;
  content:"Progress:";
  color:var(--taskboard-card-body-color);
}
.b-taskboard-progress::after{
  content:attr(data-percent);
  padding-inline-start:0.5em;
  font-size:0.9em;
  color:var(--taskboard-card-body-color);
}
.b-taskboard-progress .b-taskboard-progress-outline{
  height:var(--thickness);
}

.b-taskboard-card-header [data-ref=text]{
  display:flex;
  gap:0.5em;
  font-weight:500;
  flex:1;
}

.b-taskboard-card-body label{
  width:var(--label-width);
  flex-shrink:0;
  overflow:clip;
}
.b-taskboard-card-body [data-ref=prio]{
  display:flex;
}
.b-taskboard-card-body [data-ref=prio] .task-prio{
  display:flex;
  gap:0.25em;
}
.b-taskboard-card-body [data-ref=prio] .task-prio::before{
  display:block;
  content:"";
  width:1em;
  height:1em;
  border-radius:3px;
  align-self:center;
  flex-shrink:0;
}
.b-taskboard-card-body [data-ref=prio] .task-prio.task-prio-low::before, .b-taskboard-card-body [data-ref=prio] .task-prio.task-prio-medium::before{
  background:color-mix(in oklab, gray, var(--mix) 60%);
}
.b-taskboard-card-body [data-ref=prio] .task-prio.task-prio-high::before{
  background:color-mix(in oklab, red, var(--mix) 50%);
  color:color-mix(in oklab, red, var(--mix) 50%);
}
.b-taskboard-card-body [data-ref=team]{
  display:flex;
}

.b-small-cards{
  --label-width:0;
}

.b-taskboard-card-header .b-taskboard-chart{
  width:70px;
  height:30px;
}

.b-taskboard-card-body .b-taskboard-chart{
  width:100%;
  height:120px;
}