.activity-group-container
  .popup-feed-day-divider
    line-height 25px

  &.unseen
    background-color #E1F6FF

  .activity
    display flex
    align-items center
    margin-bottom 5px

    .activity-description
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      font-size 14px
      color #394F5A

    time
      margin-left auto
      padding-left 10px
      flex-shrink 0
      font-size 14px
      color #394F5A

.activity-group
  display flex
  align-items flex-start
  margin 0 18px
  cursor pointer

  &.full-border
    border-top 1px solid #F2F6F8

  &.semi-border
    .activity-group-summary
      border-top 1px solid #F2F6F8

  .reply-button
    padding 0 7px
    margin-right 15px
    border-radius 5px
    color white
    background-color #13CB6E
    display inline-block
    text-decoration none
    font-weight 500
    font-size 12px
    line-height 20px

    svg
      display inline-block
      vertical-align middle
      width 12px
      height 12px
      stroke transparent
      fill currentColor

.activity-group-avatar
  width 36px
  height 36px
  margin 18px 18px 0 0
  flex-shrink 0
  position relative

  .image-avatar
    width 36px
    height 36px
    border-radius 50%
    border 1px solid #EEEEEE

  .default-avatar
    width 36px
    height 36px
    padding-left 11px
    line-height 35px
    font-size 21px
    border-radius 50%
    background-color #F2F6F8
    border 1px solid #E1EEF4
    color #7695A5
    cursor pointer

  .overlay
    width 36px
    height 36px
    border-radius 50%
    background-color white
    opacity 0
    position absolute
    top 0

  .muteIcon
    visibility hidden
    position absolute

  .muted
    .overlay
      opacity 0.5

    .muteIcon
      width 18px
      height 18px
      position absolute
      top -4px
      right -4px
      background-color white
      border-radius 50%
      border 1px solid red
      display flex
      align-items center
      justify-content center
      visibility visible

  .muteLabel
    font-size 12px
    width 36px
    text-align center
    position absolute
    top 36px
    visibility hidden

  &:hover
    .muteLabel
      visibility visible

.activity-group-summary
  display flex
  width 100%
  padding 18px 0
  justify-content space-between

  &:hover
    .activity-group-quickmenu-hover-target
      visibility visible

  .expand-icon
    margin-left 15px
    color #B5D2E1

    i
      transform rotate(0deg)
      transition all 100ms ease

    &.expanded
      i
        transform rotate(90deg)

    svg
      stroke currentColor
      fill currentColor

  .end-user-email
    margin-bottom 4px

  .activity-group-activity-icon
    svg
      margin 0 0 -1px 5px

.activity-group-notif-icon
  margin-right 5px

.activity-group-summary-description
  display flex
  align-items center
  color #7695A5
  font-size 12px
  font-weight 500

  .activity-group-type
    margin-right 16px
    display flex
    align-items center

  .activity-group-timestamp
    margin-right 16px

.activity-group .reply-button:hover
.activity-group .reply-button:hover
  color white
  text-decoration underline

.activity-group-expanded
  margin-left 72px
  margin-right 18px
  padding-bottom 10px

  .activity-group-hollow-button
    color #394F5A
    border 1px solid #B5D2E1
    font-size 12px
    font-weight 500
    border-radius 3px
    line-height 24px
    text-align center
    width 100%

    &:hover
      text-decoration none

.activity-group-expanded-description
  color #7695A5
  margin-bottom 5px

.activity-group-expanded a.activity-group-hollow-link-button:hover
.activity-group-expanded a.activity-group-hollow-link-button:hover
  text-decoration none

.activity-group-expand-leave
  opacity 1

  &.activity-group-expand-leave-active
    opacity 0
    transition opacity 300ms cubic-bezier(0.4, 0.0, 1, 1)

.activity-group-expand-enter
  opacity 0

  &.activity-group-expand-enter-active
    opacity 1
    transition opacity 300ms cubic-bezier(0.0, 0.0, 0.2, 1)

.activity-group-expand-height
  transition height 300ms cubic-bezier(0.0, 0.0, 0.4, 1)