.card-main-actions
  container: card-main-actions / inline-size
  &:not(:first-child)
    margin-top: .5rem
  .form__items + &
    margin-top: 1rem

.card-main-actions__items
  display: flex
  gap: .5rem
  @container card-main-actions (min-width: 20em)
    +position(relative)
    justify-content: center
    flex-wrap: wrap
    align-items: flex-end
    min-height: 1.875rem
  @container card-main-actions (max-width: 19.9375em)
    flex-direction: column
  &.is-sub-actions
    justify-content: flex-end
    @container card-main-actions (max-width: 19.9375em)
      flex-direction: row
    .card-main-actions__item.is-sub
      position: static
      flex: 0 0 auto

.card-main-actions__item
  @container card-main-actions (min-width: 20em)
    flex: 1
    max-width: 13rem
    &.is-sub
      flex: 0 0 auto
  @container card-main-actions (max-width: 19.9375em)
    flex-basis: 100%
    max-width: 100%
    &.is-sub
      text-align: right
    &:last-child
      margin-bottom: 0
  &.is-end
    margin-left: auto
    flex-basis: 2.5rem
  .card-main-actions.is-3-items &
    @container card-main-actions (min-width: 20em)
      flex: 1

.card-main-actions__muted-action
  +hover-link-reversal
  +text-block(.8125rem 1.4)
  color: var(--muted-text)
  &:hover
    color: var(--danger)
