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

.timeline
  display flex
  flex-direction column
  margin 10px
  border-radius 10px
  height 100%
  &__header
    flex 0 1 auto
    border-radius 10px 10px 0 0
    padding 15px
    text-align center
    font-size 20px
    color darkGrey
    background-color grey-hover
  &__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 20px 35px
      &__avatar
        position relative
        top 40px
        left -20px
        & > img
          width 45px
          height 45px
          border-radius 25px
      &__createhour
        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-top 40px
      padding 10px 15px
      width 100%
      background-color lightGrey
      &__btn
        padding 5px 25px
        border-radius 5px
        width 145px
        color white
        font-size 17px
        & > i
          margin-right 10px
          color darkGrey
          font-size 22px
      &__date
        color fontColor
        font-size 17px
        margin auto 0
  &__texteditor
    flex 0 1 auto
    padding 2px
    &__simpletext
      display none
      width 70%
      &__icon
        cursor pointer
    &__wysiwyg
      display block
      & > textarea
        width 100%
        height 130px
    &__submit
      margin 10px 0
      &__btn
        display flex
        cursor pointer
        &:hover , &:focus
          box-shadow shadow-all-btn
        &__icon
          margin-left 10px

.received
  text-align right
  .timeline__messagelist__item
    &__avatar
      left 20px
    &__createhour
      margin-left 0
      margin-right 35px
    &__content
      color white


/**** MEDIA 576px & 1199px ****/

@media (min-width: min-sm) and (max-width: max-lg)

  .timeline
    &__messagelist
      min-height 350px
      max-height 700px
      &__item
        margin-right 55px

/**** MEDIA 576px & 767px ****/

@media (min-width: min-sm) and (max-width: max-sm)

  .timeline__messagelist__item
    margin-right 35px

/**** MEDIA 575px ****/

@media (max-width: max-xs)

  .timeline__texteditor
    &__simpletext
      margin-left 0
      width 65%
    &__submit
      margin-left 10px