.{$PREFIX}-segment
  color: #a3e2ff
  font-size: $size3
  min-height: 34px
  display: flex
  overflow: hidden
  overflow-x: auto
  background-color: $color_main1
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5)
  &-item
    flex-shrink: 0
    min-width: 25%
    width: 25%
    max-width: 100%
    for i in 1..4
      &:first-child:nth-last-child({i}), &:first-child:nth-last-child({i}) ~ &
        width: unit(100% / i, '%')
    display: flex
    justify-content: center
  &-box
    display: flex
    align-items: center
    position: relative
    padding: 0 10px
    max-width: 100%
  &-box2
    position: relative
    width: 100%
  &-text
    white-space: nowrap
    width: 100%
    text-overflow: ellipsis
    overflow: hidden
  &-redMark
    font-size: 10px
    color: #fff
    background-color: $color_main2
    position: absolute
    top: -5px
    right: -13px
    width: 15px
    height 15px
    padding: 2px 5px
    border-radius: 50%
  &-single-mark
    font-size: 10px
    color: #fff
    background-color: $color_main2
    position: absolute
    top: 0
    right: -8px
    padding: 2px 5px
    border-radius: 6px / 50%
    border-radius: calc(1ch + 3px) / 50%
    transform: translate(50%, -40%)
  &-mark
    font-size: 10px
    color: #fff
    background-color: $color_main2
    position: absolute
    top: 0
    right: -8px
    padding: 2px 3px
    border-radius: 6px / 50%
    border-radius: calc(1ch + 3px) / 50%
    transform: translate(50%, -40%)
  &-active
    color: #fff
  &-active &-box:after
    content: ""
    position: absolute
    bottom: 2px
    left: 10px
    right: 10px
    height: 2px
    background-color: #fff