.#{$segment-prefix-cls} {
  display: flex;
  min-height: $segment-item-height;
  overflow: hidden;
  border-radius: $border-radius;

  &__item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: $segment-font-size;
    color: $brand-primary;
    background: $white;
    border: 1px solid $brand-primary;
    border-left-width: 0;
    transition: background $transition-time;

    &:first-child {
      border-left-width: 0.02rem;
      border-radius: $border-radius 0 0 $border-radius;
    }

    &:last-child {
      border-radius: 0 $border-radius $border-radius 0;
    }

    &--selected {
      color: $white;
      background: $brand-primary;
    }
  }
}