$bar-height: .75rem
.completed-practices-progress
  padding: .75rem 1rem
  display: flex
  align-items: center
  gap: .5rem

.completed-practices-progress__bar-container
  flex: 1
  border-radius: 20rem
  height: $bar-height
  overflow: hidden

.completed-practices-progress__bar
  +size(100% $bar-height)
  background-color: var(--background-semi-shade)

.completed-practices-progress__percentage-bar
  height: $bar-height
  background-color: var(--success)
  +position(relative, top $bar-height * -1)
  box-shadow: rgba(black, .2) 0 .0625rem .0625rem

.completed-practices-progress__counts
  position: relative
  cursor: pointer
  display: block

.completed-practices-progress__counts-inner
  cursor: pointer
  &:hover
    .completed-practices-progress__percentage
      text-decoration: underline

.completed-practices-progress__percentage
  +text-block(.8125rem, right nowrap)

.completed-practices-progress__number
  position: absolute
  right: 0
  bottom: calc(100% + .5rem)
  background-color: var(--base)
  border: solid 1px var(--border)
  padding: .25rem .5rem
  +text-block(.8125rem 1.4, right nowrap)
  border-radius: .25rem

.completed-practices-progress__counts
  input:checked ~ label .completed-practices-progress__number
    display: block

.completed-practices-progress__counts
  input:not(:checked) ~ label .completed-practices-progress__number
    display: none
