.card-list-item-actions__trigger
  +size(2.25rem)
  display: flex
  align-items: center
  justify-content: center
  cursor: pointer
  color: var(--muted-text)
  align-self: flex-start
  +media-breakpoint-up(md)
    margin-top: -.5rem
    margin-right: -.5rem
  +media-breakpoint-down(sm)
    +position(absolute, left 0, top 2.75rem)

.card-list-item-actions__inner
  display: none
  +position(absolute, right -.5rem, top -.5rem, 3)
  input:checked + &
    display: block

.card-list-item-actions__items
  +position(relative, 2)
  border: solid 1px var(--border)
  width: 10rem
  border-radius: .25rem
  overflow: hidden

.card-list-item-actions__item
  .card-list-item-actions__item + &
    border-top: dashed 1px var(--border)

.card-list-item-actions__action
  font-size: .8125rem
  color: var(--default-text)
  +flex-link
  align-items: center
  background-color: var(--base)
  transition: all .2s ease-out
  padding: .5em 1em
  min-height: 2.75rem
  i
    margin-right: .5em
  &:hover
    background-color: tint($main, 95%)
    color: var(--main-text)
