$colors-list: ( 'color-primario': $color-primario, 'color-secundario': $color-secundario, 'color-acento-contenido': $color-acento-contenido, 'color-acento-botones': $color-acento-botones, 'color-adicional-1': $color-adicional-1, 'color-adicional-2': $color-adicional-2)
.dialogo
  border: 2px solid
  border-radius: 10px
  overflow: hidden
  background-color: #f8f9ff
  &__chat
    overflow-y: scroll
    overflow-x: hidden
    background-color: #f8f9ff
    border-radius: 10px
    height: 450px
    margin-right: 1.5rem
    padding-top: 0.5rem
    padding-right: 1.5rem
    &::-webkit-scrollbar
      width: 10px
    &::-webkit-scrollbar-track
      border-radius: 10px
      background-color: #e5e5e5
    &::-webkit-scrollbar-thumb
      background-color: #b4bfd8
      height: 20px
      border-radius: 10px
    &::-webkit-scrollbar-thumb:hover
      background-color: $color-acento-contenido
    &::-webkit-scrollbar-thumb:active
      background-color: $color-acento-contenido
    @media only screen and (max-width: 768px)
      height: 300px
      margin-right: 0
      padding-right: 0.5rem
      .dialogo__chat__item
        margin-right: 0
    @media only screen and (max-width: 450px)
      height: 250px
    &__item
      display: flex
      align-items: flex-start
      &__person
        text-align: center
        margin-right: 1em
        img
          width: 50px
          height: 50px
          border-radius: 50%

      &__message
        display: inline-block
        &__container
        &__bubble
          text-align: left
          padding: 1em
          border-radius: 10px
          background-color: $white
          -webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2)
          box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2)
          position: relative

          &--tail
            &:before
              content: ""
              position: absolute
              top: 0
              left: 0
              width: 13px
              height: 13px
              transform: translate(-5px, 20px ) rotate(45deg)
              background-color: white
          @media (max-width: 768px)
            padding: 0.5em

        &__text
          span
            line-height: 1.4em

          &__drop
            border-bottom: 2px solid $color-primario
            background-color: #E1E8FF
            border-radius: 3px 3px 0px 0px
            min-height: 1.8em
            vertical-align: baseline
            text-align: center

            &.is-active
              border-color: $green

            &__response
              padding: 0 0.2em

            &__default
              display: inline-block
              min-width: 50px

          &__esp
            .dialogo__chat__item__message__text__drop
              border-bottom-color: transparent
              background-color: $lightest-gray
            *
              color: $dark-gray

        &__audio

        &__translate-btn
          padding: 0.3rem 0.6rem 0.4rem 0.6rem
          border-radius: 0px 0px 7px 7px
          color: $white
          line-height: 1em

      &.borde
        .dialogo__chat__item__message__bubble
          border: 2px solid
        .dialogo__chat__item__message__bubble--tail
          &:before
            border-bottom: 2px solid
            border-left: 2px solid
            transform: translate(-8px, 20px ) rotate(45deg)

      @each $name, $value in $colors-list
        &.#{$name}
          .dialogo__chat__item__message__bubble
            border-color: $value
          button
            background-color: $value
            color: textColor($value)
            &:hover
              background-color: lighten($value, 20%)

          &.borde
            .dialogo__chat__item__message__bubble--tail
              border-color: $value
              &:before
                border-color: $value

    .dialogo__chat__item
      &:nth-child(even)
        flex-direction: row-reverse

        .dialogo__chat__item
          &__person
            margin-right: 0
            margin-left: 1em
          &__message
            &__container
              text-align: right
            &__bubble
              &:before
                left: auto
                right: 0
                transform: translate(5px, 20px ) rotate(45deg)
    &.borde
      border: 2px solid

    &--no-scroll
      overflow-y: auto
      height: auto

    @each $name, $value in $colors-list
      &.#{$name}
        border-color: $value
        button
          background-color: $value
          color: textColor($value)
          &:hover
            background-color: lighten($value, 20%)

  &__words
    display: flex
    flex-direction: column
    &__content
      flex: 1 0 0%
      display: flex
      flex-direction: column
      @media only screen and (max-width: 768px)
        flex-direction: column-reverse
    &__word
      display: inline-block
      padding: 0.2em 0.4em
      margin: 0.2em
      cursor: grab
      box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)
      &.grabbing
        cursor: grabbing
        cursor: -moz-grabbing
        cursor: -webkit-grabbing

      &.touch-drag
        position: fixed
        opacity: 0.7

  &__score
    border-radius: 10px
    .approved
      background-color: #E2F3D5
    .disapproved
      background-color: #FBB9BE

  @each $name, $value in $colors-list
    &.#{$name}
      border-color: $value
      button
        background-color: $value
        color: textColor($value)
        &:hover
          background-color: lighten($value, 20%)
      .dialogo
        &__header
          background-color: $value
          *
            color: textColor($value)
        &__words
          &__word
            background-color: lighten($value, 50%)
            color: $value

.dialogoChat
  border-radius: 10px
  overflow: hidden
  border: 2px solid $color-acento-contenido
  &__chat
    overflow-y: scroll
    overflow-x: hidden
    height: 450px
    margin-right: 1.5rem
    padding-top: 0.5rem
    padding-right: 1.5rem
    &::-webkit-scrollbar
      width: 10px
    &::-webkit-scrollbar-track
      border-radius: 10px
      background-color: #e5e5e5
    &::-webkit-scrollbar-thumb
      background-color: #b4bfd8
      height: 20px
      border-radius: 10px
    &::-webkit-scrollbar-thumb:hover
      background-color: $color-acento-contenido
    &::-webkit-scrollbar-thumb:active
      background-color: $color-acento-contenido
    @media only screen and (max-width: 768px)
      height: 300px
      margin-right: 0
      padding-right: 0.5rem
      .dialogoChat__chat__item
        margin-right: 0
    @media only screen and (max-width: 450px)
      height: 250px
    &__item
      display: flex
      align-items: flex-start
      &__person
        text-align: center
        margin-right: 1em
        img
          width: 50px
          height: 50px
          border-radius: 50%

      &__message
        display: inline-block
        &__container
        &__bubble
          text-align: left
          padding: 1em
          border-radius: 10px
          background-color: $white
          -webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2)
          box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2)
          position: relative
          &:before
            content: ""
            position: absolute
            top: 0
            left: 0
            width: 15px
            height: 15px
            transform: translate(-5px, 20px ) rotate(45deg)
            background-color: white
          @media (max-width: 768px)
            padding: 0.5em
        &__audio

      &:nth-child(even)
        flex-direction: row-reverse

        .dialogoChat__chat__item
          &__person
            margin-right: 0
            margin-left: 1em
          &__message
            &__container
              text-align: right
            &__bubble
              &:before
                left: auto
                right: 0
                transform: translate(5px, 20px ) rotate(45deg)

  @each $name, $value in $colors-list
    &.#{$name}
      border-color: $value
      button
        background-color: $value
        color: textColor($value)
        &:hover
          background-color: lighten($value, 20%)
      .dialogo
        &__header
          background-color: $value
          *
            color: textColor($value)