@import '../../css/Variable.styl'

.timeline
  display flex
  flex-direction row
  margin 10px 10px 10px 5px
  border-radius 10px
  width 100%
  height 100%
  & > p
    margin 0
    padding 0
  &__header
    display flex
    flex-direction column
    border-radius 10px 0 0 10px
    width 50px
    background-color grey-hover
    font-size 20px
    color darkGrey
    cursor pointer
    &__icon
      text-align center
    &__title
      transform rotate(-90deg)
  &__info
    position absolute
    display flex
    align-items center
    justify-content space-between
    margin 10px
    padding 5px 15px
    width calc(100% - 20px)
    background-color #fee498
    border-radius 10px
    z-index 1
    &__msg > i
      margin-right 8px
    &__btnrestore
      cursor pointer
      & > i
        margin-right 8px
  &__body
    display flex
    flex-direction column
    width 100%
    &__messagelist
      flex 1 1 auto
      margin-bottom 0
      padding-left 0
      border-bottom 1px solid grey
      background-color off-white
      overflow-y auto
      list-style none
      &__item
        padding 0 25px 15px 35px
        &__avatar
          position relative
          top 60px
          left -20px
          border-radius 50%
          width 45px
          height 45px
          & > img
            width 45px
            height 45px
            border-radius 25px
        &__authorandhour
          margin-left 35px
          opacity 0.7
          font-size 14px
        &__content
          display inline-block
          border 1px solid grey
          border-radius 5px
          padding 15px
          background-color off-white
          font-size 15px
      &__version
        display flex
        justify-content space-between
        margin 20px 0 20px 0
        padding 10px 15px
        width 100%
        background-color lightGrey
        &__btn
          display flex
          justify-content center
          padding 5px 20px
          border-radius 5px
          width 145px
          color white
          font-size 17px
          cursor pointer
          & > i
            margin-right 10px
            color off-white
            font-size 22px
        &__date
          color fontColor
          font-size 17px
          margin auto 15px
    &__texteditor
      flex 0 1 auto
      margin 20px
      &__textinput
        width 100%
        & > textarea
          border-radius 5px
          border 1.5px solid grey
          padding 5px
          height 80px
          width 100%
      &__wrapper
        display flex
        align-items center
        justify-content flex-end
        margin-top 10px
      &__advancedtext
        margin-right 15px
        cursor pointer
      &__submit
        &__btn
          display inline-block
          cursor pointer
          &__icon
            display inline-block
            margin-left 20px

.sent
  text-align right
  .timeline__body__messagelist__item
    &__wrapper
      display flex
      flex-direction row-reverse
    &__avatar
      left 20px
    &__authorandhour
      margin-left 0
      margin-right 35px


.mce-btn-group:not(:first-child)
  border-left none!important //remove the left borders of the wysiwyg for a better aesthetic result

@media (min-width: min-lg) and (max-width: max-lg)
  .timeline
    margin 0

@media (min-width: min-sm) and (max-width: max-md)
  .timeline
    display block
    margin 0

@media (max-width: max-xs)
  .timeline
    display block
    margin 0
    &__messagelist__version__date
      font-size 15px