.category-practices-item
  padding: .75rem 1rem
  +position(relative)
  &:not(:last-child)
    border-bottom: solid 1px var(--border-tint)
  &:nth-child(even)
    background-color: var(--background-more-tint)
  +media-breakpoint-down(sm)
    flex-wrap: wrap
    padding: .5rem .75rem .75rem
  &.sortable-chosen
    background-color: tint($warning, 90%)
  &.is-skip-on
    background-color: var(--background-tint)
  &[draggable="false"]
    background-color: var(--base)
    animation: grab-background-color 1.25s ease 0s 1 normal none running

.category-practices-item__grab
  flex: 0 0 2.75rem

.category-practices-item__anchor
  +media-breakpoint-up(md)
    +position(relative, top -3.5rem)

.category-practices-item__status
  +text-block(.8125rem 1, 600)
  +flex-link
  align-items: center
  justify-content: center
  +size(4rem 2.125rem)
  border-radius: .25rem
  +practice-color

.category-practices-item__header
  display: flex
  +media-breakpoint-down(sm)
    display: block

.category-practices-item__title
  flex: 1
  margin-right: .5rem
  +media-breakpoint-down(sm)
    margin-right: 0
    margin-bottom: .5rem

.category-practices-item__title-link
  +text-block(.875rem 1.4, flex)
  color: var(--default-text)
  align-items: center
  min-height: 1.875rem
  text-decoration: none
  +media-breakpoint-down(sm)
    font-size: .8125rem
  .a-badge
    margin-right: .25rem
  &.is-skip-on
    color: var(--muted-text)

.category-practices-item__title-link-label
  a.category-practices-item__title-link:hover &
    text-decoration: underline

.category-practices-item__learning-time
  +text-block(.75rem 1.4)
  color: var(--muted-text)
  +media-breakpoint-up(md)
    margin-top: -.25rem
  +media-breakpoint-down(sm)
    margin-top: .5rem
