.practice-status-buttons__start
  text-align: center
  width: 100%
  display: flex
  align-items: center

.practice-status-buttons__label
  +media-breakpoint-up(md)
    +text-block(.75rem, 600 nowrap)
    margin-right: 1em
  +media-breakpoint-down(sm)
    display: none

.practice-status-buttons__items
  white-space: nowrap
  flex: 1
  +media-breakpoint-up(md)
    max-width: 25rem

.practice-status-buttons__item
  flex: 1
  +media-breakpoint-up(md)
    max-width: 4.75rem

.practice-status-buttons__button
  &.is-inactive
    $color: var(--base)
    color: var(--muted-text)
    background-color: $color
    border-color: var(--background-shade)
    transition: all .2s ease-out
    &:hover
      +practice-hover-color(true)
  &.is-active
    pointer-events: none
    +practice-color(true)
    +position(relative, 1)

.practice-status__buttons-item
  +media-breakpoint-down(sm)
    width: 33.33%
    .a-button
      width: 100%

.practice-status-buttons__note
  +text-block(.75rem 1.4, left)
  color: var(--muted-text)
  margin-top: .5em
