:root {
  --bar-bg: #fff;
}
.funnel-numbers__wrap {
  display: flex;
  margin-bottom: var(--spacer-xs);
}
.funnel-numbers {
  padding-left: var(--spacer-xs);
  padding-right: var(--spacer-xs);
  border-left: 1px solid var(--color-divider);
  &:first-child {
    border: none!important;
    padding-left: 0!important;
  }
  &:last-child {
    padding-right: 0!important;
  }
}
.funnel-numbers__header {
  min-height: 2.5em;
  font-size: var(--font-size--sm);
  color: var(--color-text);
  margin-bottom: var(--spacer-xs);
  margin-top: 0;
}
.funnel-numbers__number {
  margin: 0;
  font-size: var(--font-size--xxl);
  color: #fff;
}
.funnel-chart > * + * {
  margin-top: var(--spacer-2xs);
}
.funnel-chart__label {
  font-size: var(--font-size--sm);
  color: var(--color-text);
  margin-bottom: .2rem;
  margin-top: 0.5em;
}

.funnel-chart__bar {
  position: relative;
  display: flex;
  height: 1.5rem;
  font-size: var(--font-size--xl);
}
.funnel-chart__bar--arrow {
  display: grid;
  grid-template-columns: 1fr 1rem;
}
.funnel-chart__bar--arrow:after {
  content: "";
  background-image: url("/assets/storybook/Dashboard/arrow-bar.svg");
  background-repeat: no-repeat;
}
.funnel-chart__bar--segments {
  & > * + * {
    margin-left: 1px;
  }
}
.funnel-chart__segment {
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-right: .5rem;
  justify-content: flex-end;
  background: var(--bar-bg);
  width: var(--segment-width);

}
.funnel-chart__segment--blue {
  --bar-bg: var(--db-blue-dark);
}
.funnel-chart__segment--yellow {
  --bar-bg: var(--db-yellow-dark);
}
.funnel-chart__segment--red {
  --bar-bg: var(--db-red-dark);
}
.funnel-chart__segment--green-light {
  --bar-bg: var(--db-green);
}
.funnel-chart__segment--green {
  --bar-bg: var(--db-green-dark);
}
.funnel-chart__segment--brown {
  --bar-bg: var(--db-brown-dark);
}