.segmentButton {
  --Text-primaryNoneBg: var(--base-black);
  --Text-disabled: var(--neutral-100);
}

@media (prefers-color-scheme: dark) {
  .segmentButton {
    --Text-primaryNoneBg: var(--base-white);
    --Text-disabled: var(--neutral-800);
  }
}

.segmentButton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  text-align: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  box-sizing: border-box;
  color: var(--Text-primaryNoneBg);
}

.segmentButton[disabled] {
  color: var(--Text-disabled);
}

.segmentButton span.redDot {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.segmentButton span.redDot::after {
  content: "";
  display: flex;
  width: 0.44194rem;
  height: 0.44194rem;
  background-color: #f00;
  position: absolute;
  border-radius: 50%;
  left: 2.5rem;
  top: -0.3rem;
  
}

.segmentButton[iconleft] span.redDot::after, .segmentButton[iconright] span.redDot::after{
    left: 1rem;
}

.segmentButton:before, .segmentButton::after{
    font-family: 'dr-odds';
}

.segmentButton[iconleft]::before {
    content: attr(iconleft);
}

.segmentButton[iconright]::after {
    content: attr(iconright);
}