// sass-lint:disable no-vendor-prefixes

.comment
  &__card
    background-color: get-color(air)
    border-radius: 4px
    box-shadow: 0 1px 2px 0 get-color((color: dark, opacity: .1))
    display: block
    padding: 20px

    &--active
      border: 1px solid get-color(raiz)
      box-shadow: 0 1px 15px 0 get-color((color: dark, opacity: .1))

  &__avatar
    background-color: get-color(raiz)
    border-radius: 100%
    display: inline-block
    height: 32px
    vertical-align: top
    width: 32px

  &__profile
    display: inline-block
    font-size: 14px
    font-weight: 700
    margin-left: 5px
    vertical-align: -webkit-baseline-middle

  &__name
    color: get-color((color: dark, opacity: .6))

  &__date
    color: get-color((color: dark, opacity: .4))
    display: block
    font-weight: 500
    line-height: 9px
    margin-top: 4px

  &__content
    color: get-color((color: dark, opacity: .6))
    font-size: 14px
    line-height: 1.3
    margin-top: 10px

  &__reply
    color: get-color((color: raiz, opacity: .9))
    font-size: 12px
    font-weight: 500
    margin-top: 6px
    text-transform: uppercase

  &__answer
    border-top: 1px solid get-color((color: rock, opacity: .1))
    margin-left: -20px
    margin-right: -20px
    padding: 10px 20px 0

  &__more-answer
    border-top: 1px solid get-color((color: rock, opacity: .1))
    margin-left: -20px
    margin-right: -20px
    padding: 20px 20px 0

    span
      color: get-color(gafieira)
      display: block
      font-size: 12px
      font-weight: 700
      line-height: 1.17
      text-align: center
      text-transform: uppercase
      width: 100%


  &__replying-to
    align-items: center
    display: none
    justify-content: space-between
    margin-top: 10px

    &--active
      display: flex