@mixin anAdjacentCard
  +media-breakpoint-up(xl)
    margin-top: 1.25rem
  +media-breakpoint-down(lg)
    margin-top: 1rem

.a-card
  display: flex
  flex-direction: column
  border-radius: .25rem
  width: 100%
  margin-inline: auto
  background-color: var(--base)
  border: solid 1px var(--border)
  &.is-danger
    border-color: var(--danger)
    color: var(--danger-text)
    background-color: var(--danger-tint)
  +media-breakpoint-down(lg)
    &:not(:last-child)
      margin-bottom: 1rem
  .a-card + &
    @include anAdjacentCard
  & + .a-card-react
    @include anAdjacentCard
  .a-card-react + &
    @include anAdjacentCard
  &.is-borderd
    border: solid 4px var(--default-text)
  &.is-modal
    width: 42.5rem
    max-width: 100%
    +media-breakpoint-down(sm)
      margin-inline: 1rem
  &.is-toggle
    label
      cursor: pointer
    > input:not(:checked) + * + *
      display: none
    > input:not(:checked) + *
      border-bottom: none
    > input:checked + * + *
      display: block
    > input:not(:checked) + * .is-hidden-then-unchecked
      display: none
    > input:checked + * .is-hidden-then-checked
      display: none
    .card-body
      max-height: 50vh
      overflow-y: auto
  &:has(.a-table)
    border: none
    .card-header
      border: solid 1px var(--border)
      border-bottom: none
  &.is-danger
    border: solid .25rem var(--danger)

table.a-card
  display: table

.a-card__alert
  padding: .5rem 1.25rem
  background-color: var(--danger)
  text-align: center
  +text-block(.875rem 1.4)
  color: var(--reversal-text)
  +border-radius(top, .25rem)
  a
    +hover-link-reversal
    color: var(--reversal-text)

.a-card__columns
  display: flex
  +media-breakpoint-down(md)
    flex-direction: column
