.event-main-actions
  +position(relative, 1)
  padding-block: .75rem
  margin-inline: 1rem
  border-radius: 4px
  +media-breakpoint-up(md)
    padding-inline: 2rem
    margin-bottom: 1.5rem
  +media-breakpoint-down(sm)
    padding-inline: .75rem
    margin-bottom: 1rem
  &.is-participationed
    background-color: #f8fff2
    border: 1px solid var(--success)
    color: #4e732e
  &.is-unparticipationed.is-available
    border: 1px solid var(--primary)
    background-color: #f5f5ff
    color: #28248c
  &.is-unparticipationed.is-capacity-over
    border: 1px solid var(--warning)
    background-color: #fff9e7
    color: #6f5819
  &.is-non-participationed
    border: 1px solid var(--danger)
    background-color: var(--danger-tint)
    color: var(--danger)

.event-main-actions__description
  +text-block(.875rem 1.4)
  margin-bottom: .75em
  text-align: center

.event-main-actions__items
  display: flex
  justify-content: center

.event-main-actions__item
  text-align: center
  flex: 1
  +media-breakpoint-up(md)
    max-width: 16rem

.event-main-actions__item-cancel
  +hover-link-reversal
  color: var(--muted-text)
  font-size: .8125rem
