$radio-size: .875rem

.linear-scale
  display: flex
  align-items: center

.linear-scale__label
  +text-block(.8125rem 1.4)
  &:first-child
    margin-right: 1rem
  &:last-child
    margin-left: 1rem

.linear-scale__points
  flex: 1

.linear-scale__points-items
  display: flex
  justify-content: space-between

.linear-scale__point
  display: flex
  flex-direction: column
  +text-block(.875rem 1.4)
  display: block
  color: var(--semi-muted-text)
  +position(relative)
  cursor: pointer
  padding-bottom: $radio-size
  width: 2.25rem
  text-align: center
  &::before
    content: ""
    text-decoration: none
    +size($radio-size)
    border: solid 1px var(--input-border)
    display: block
    +position(absolute, left 50%, bottom 0)
    transform: translate(-50%, 0)
    background-color: var(--base)
    border-radius: 50%
    +text-block(.75rem 1)
    display: flex
    color: var(--reversal-text)
    align-items: center
    justify-content: center
    transition: all .2s ease-out
  &:hover::before
    background-color: rgba($primary, .4)
    border-color: var(--primary)
  &:hover::after
    text-decoration: none
  input:checked + &
    color: var(--default-text)
  input:checked + &::before
    background-color: var(--primary)
    border-color: var(--primary)
    box-shadow: var(--background) 0 0 0 1px inset
  input:checked + &:hover::before
    border-color: var(--primary)
  input:checked + &::after
    opacity: 1
