@keyframes loadingNow
  0%
    opacity: .4
  100%
    opacity: 1

.a-placeholder
  background-color: var(--placeholder)
  animation: loadingNow .75s ease infinite alternate
  &.a-user-icon
    background-color: var(--placeholder)
    display: block
  &.page-content-header-metas
    height: 1.4em
    background-color: var(--placeholder)
    width: 50%
  &.thread-header-title
    height: 1.5em
    width: 70%
  &.card-list-item-title
    height: 1.5em
    width: 50%
  &.card-list-item-meta__items
    height: 1.4em
    width: 70%
    margin-inline: 0
  &.a-button
    background-color: var(--placeholder)
    border: none
  &.page-nav__item
    border: none
    .page-nav__item-link-inner
      height: 1.4em
      width: 100%
      background-color: var(--placeholder)
      display: block
  &.practice-status.category-practices-item__status
    background-color: var(--placeholder)
  &.categories-item__title
    height: 1.5em
    width: 50%
    background-color: var(--placeholder)
  &.category-practices-item__title-link
    height: 1.5em
    width: 50%
    background-color: var(--placeholder)
  &.group-company-name__label
    height: 1em
    width: 50%
    background-color: var(--placeholder)
    display: block
  &.group-company-name__label-option
    height: 1em
    width: 50%
    background-color: var(--placeholder)
    display: block
  &.user-group__title-label
    height: 1.2em
    width: 10%
    background-color: var(--placeholder)
  &.user-group__date
    height: 1em
    width: 20%
    background-color: var(--placeholder)
  &.a-long-text
    background-color: transparent
    p
      background-color: var(--placeholder)
      height: auto
      margin-bottom: 0
      &:not(:first-child)
        margin-top: .5em
      &:nth-child(1)
        width: 70%
      &:nth-child(2)
        width: 100%
      &:nth-child(3)
        width: 100%
      &:nth-child(4)
        width: 80%
      &:nth-child(5)
        width: 60%
      &:nth-child(6)
        width: 20%
      &:nth-child(7)
        width: 100%
      &:nth-child(8)
        width: 80%
      &:nth-child(9)
        width: 60%
      &:nth-child(10)
        width: 20%
      &:nth-child(11)
        width: 80%
      &:nth-child(12)
        width: 60%
      &:nth-child(13)
        width: 20%
  &.card-list-item-title
    height: 1.2em
    width: 30%
  &.card-list-item-meta__item
    height: 1em
    width: 35%
  &.sns-links__items.is-button-group
    height: 1.8em
    width: 60%
  &.users-item__description.a-short-text
    height: 0.8em
    width: 50%
  &.tag-links__item
    height: 1.3em
    width: 20%
  &.completed-practices-progress__bar
    height: 1em
    width: 100%
    background-color: var(--placeholder)
  &.completed-practices-progress__number
    height: 1em
    width: 10%
  &.card-counts__item-inner
    height: 2.8125rem
    background-color: var(--placeholder)
    border: none

.a-card.is-loading
  border: none
  background-color: rgba($base, .8)
