.tag.is-zone-1 {
  --bulma-tag-h: var(--sk-zone-1-h);
  --bulma-tag-s: var(--sk-zone-1-s);
  --bulma-tag-background-l: var(--sk-zone-1-l);
  --bulma-tag-color-l: var(--bulma-primary-invert-l);
}
.tag.is-zone-2 {
  --bulma-tag-h: var(--sk-zone-2-h);
  --bulma-tag-s: var(--sk-zone-2-s);
  --bulma-tag-background-l: var(--sk-zone-2-l);
  --bulma-tag-color-l: var(--bulma-primary-invert-l);
}
.tag.is-zone-3 {
  --bulma-tag-h: var(--sk-zone-3-h);
  --bulma-tag-s: var(--sk-zone-3-s);
  --bulma-tag-background-l: var(--sk-zone-3-l);
  --bulma-tag-color-l: var(--bulma-primary-invert-l);
}
.tag.is-zone-4 {
  --bulma-tag-h: var(--sk-zone-4-h);
  --bulma-tag-s: var(--sk-zone-4-s);
  --bulma-tag-background-l: var(--sk-zone-4-l);
  --bulma-tag-color-l: var(--bulma-primary-invert-l);
}
.tag.is-zone-5 {
  --bulma-tag-h: var(--sk-zone-5-h);
  --bulma-tag-s: var(--sk-zone-5-s);
  --bulma-tag-background-l: var(--sk-zone-5-l);
  --bulma-tag-color-l: var(--bulma-primary-invert-l);
}
.tag.is-zone-6 {
  --bulma-tag-h: var(--sk-zone-6-h);
  --bulma-tag-s: var(--sk-zone-6-s);
  --bulma-tag-background-l: var(--sk-zone-6-l);
  --bulma-tag-color-l: var(--bulma-primary-invert-l);
}
.tag.is-zone-7 {
  --bulma-tag-h: var(--sk-zone-7-h);
  --bulma-tag-s: var(--sk-zone-7-s);
  --bulma-tag-background-l: var(--sk-zone-7-l);
  --bulma-tag-color-l: var(--bulma-primary-invert-l);
}

.has-text-skrush-surface {
  color: var(--skrush-surface-hex);
}

.highlight {
    position: relative;
    padding-left: 1rem;
}

.highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background-color: var(--bg-color, #ff3860);
}

.highlight-small:before {
  width: 4px
}

.bg-z1:before {
  background-color: var(--sk-zone-1-hex);
}
.bg-z2:before{
  background-color: var(--sk-zone-2-hex);
}
.bg-z3:before {
  background-color: var(--sk-zone-3-hex);
}
.bg-z4:before {
  background-color: var(--sk-zone-4-hex);
}
.bg-z5:before {
  background-color: var(--sk-zone-5-hex);
}
.bg-z6:before {
  background-color: var(--sk-zone-6-hex);
}
.bg-z7:before {
  background-color: var(--sk-zone-7-hex);
}

.bg-primary:before {
  background-color: var(--bulma-primary);
}

.bg-vert:before {
  background-color: var(--sk-elevation-hex);
}
.bg-distance:before {
  background-color: var(--sk-distance-hex);
}
.bg-pace:before {
  background-color: var(--sk-pace-hex);
}
.bg-time:before {
  background-color: var(--sk-time-hex);
}