/**
 * RESUMEN
 *
 * Este documento describe los elementos que componen el sitio.
 * Desde el layout interno hasta el color de las fuentes, etc.
 *
 * Lo viste antes, pero ahora, pensar en BEM (Block–Element–Modifier)
 * es incluso más aparente en el código. Si esta es la primera vez
 * que escuchas sobre el BEM, te recomendamos leer la siguiente sección
 * en las CSS guidelines de Harry Roberts: https://cssguidelin.es/#bem-like-naming.
 */


/**
 * TABLA DE CONTENIDOS 
 *
 * 1. BOTONES
 *
 * 2. IMÁGENES DE PERFIL
 *
 * 3. ÍCONOS
 *
 * 4. BARRA LATERAL
 *
 * 5. ENCABEZADO
 *
 * 6. CHAT
 *
 * 7. EDITOR DE MENSAJE
 */





/*------------------------------------*\
  #BOTONES
\*------------------------------------*/

/**
 * 1. Quitamos el border para que no nos moleste cuando pongamos el padding.
 * Además, es innecesario poner borders en un botón completo. :)
 *
 */

 .button {
  display:        inline-block;
  border:         .125vw solid;
  border-radius:  24px;
  text-align:     center;
}

  .button--primary-solid {
    border:           0; /* [1] */
    background-color: #6200ea;
    color:            #ffffff;
  }

  .button--primary-solid:visited { color: #ffffff; }

  .button--primary-hollow {
    border-color:     #6200ea;
    background-color: transparent;
    color:            #6200ea;
  }

  .button--primary-hollow:visited { color: #6200ea; }





/*------------------------------------*\
#IMÁGENES DE PERFIL
\*------------------------------------*/

/**
 * 1. Así como con el blog, con esta property, podemos mostrar todas las imágenes,
 * en bonitos marcos cuadrado, sin tener que comprimirlos,
 * sin importar sus proporciones originales.
 */

.user-avatar {
  float:          left;
  width:          5.5555vh;
  height:         5.5555vh;
  border-radius:  50%;
  margin-right:   .9375vw;
  object-fit:     cover;
}

  .user-avatar--in-chat-header {
    position:     absolute;
    top:          2.2222vh;
    left:         71.25vw;
    width:        4.4444vh;
    height:       4.4444vh;
    margin-right: 0;
  }

  .user-avatar--message-self {
    position:     absolute;
    bottom:       1.1111vh;
    right:        0;
    margin-right: 0;
  }





/*------------------------------------*\
#ÍCONOS
\*------------------------------------*/

.icon {
  font-size:  2.2222vh;
  opacity:    .25;
}

  .icon--emoji,
  .icon--attach-file {
    position: absolute;
    top:      1.6666vh;
    right:    5.625vw;
  }

  .icon--attach-file { right: 8.75vw; }

  .icon--send {
    opacity: 1;
  }





/*------------------------------------*\
  #BARRA LATERAL
\*------------------------------------*/

.sidebar {
  height:           100vh;
  background-color: #ffffff;
}

  .sidebar__header {
    position:       relative;
    height:         8.7777vh;
    border-bottom:  .1111vh solid;
    border-color:   #f4f3f5;
  }

    .sidebar__search {
      position:         absolute;
      top:              1.6666vh;
      left:             .9375vw;
      display:          block;
      width:            20vw;
      height:           5.5555vh;
      padding:          1.7777vh 0 1.4444vh 1.5vw;
      border:           0;
      border-bottom:    .3333vh solid;
      border-color:     transparent;
      margin-bottom:    1.6666vh;
      background-color: #f4f3f5;
      outline:          none;
    }

    .sidebar__search:focus { border-bottom-color: #6200ea; }

    .sidebar__search::placeholder {
      font-weight: bold;
      opacity:     .25;
    }

      .sidebar__search-submit {
        position:         absolute;
        top:              1.6666vh;
        left:             20.9375vw;
        width:            5.5555vh;
        height:           5.5555vh;
        padding:          1.6666vh;
        border:           none;
        background-color: #f4f3f5;
        text-align:       center;
        cursor:           pointer;
      }

  .sidebar__contact-list {
    list-style-type:  none;
    padding:          0;
  }

    .contact {
      padding:              1.6666vh .9375vw 1.6666vh .625vw;
      border-bottom:        .1111vh solid;
      border-left:          .3125vw solid;
      border-bottom-color:  #f4f3f5;
      border-left-color:    transparent;
    }

    li.contact:first-child { border-left-color: #6200ea; }

    .contact-card,
    .contact-card__text         { color: #211138; }

    .contact-card:visited,
    .contact-card__text:visited { color: #211138; }

    .contact-card__text {
      margin:         0 0 .5555vh 4.0625vw;
      white-space:    nowrap;
      text-overflow:  ellipsis;
      overflow:       hidden;
    }

    .contact-card__name {
      margin-top:     .5555vh;
      color:          #6200ea;
      font-size:      1.3333vh;
      font-weight:    bold;
      text-transform: uppercase;
      letter-spacing: .15vw;
    }

  .sidebar__cta { padding: 1.6666vh; }

    .sidebar__add-new-contact {
      width:          100%;
      padding:        1.7777vh 0;
      font-size:      1.3333vh;
      font-weight:    bold;
      text-transform: uppercase;
      letter-spacing: .15vw;
    }





/*------------------------------------*\
  #ENCABEZADO
\*------------------------------------*/

/**
 * 1. Escogimos la propiedad position para el layout del componente.
 * Posicionamos el logo relativo al relative container.
 * Si deseas aprender más sobre esta técnica,
 * lee nuestro módulo "Todo en su lugar".
 *
 * 2. Con este método, puedes centrar las cosas fácilmente.
 * Puedes encontrar más información sobre esto aquí:
 * https://www.w3schools.com/howto/howto_css_center-vertical.asp
*/

.header {
  position:         relative; /* [1] */
  height:           8.8888vh;
  background-color: #6200ea;
}

  .header__contact-name {
    position:     absolute;
    top:          3.3333vh;
    left:         1.875vw;
    font-size:    2.2222vh;
    font-weight:  bold;
    color:        #ffffff;
  }

  .header__contact-name:visited { color: #ffffff; }

  .header__logo {
    position:   absolute; /* [1] */
    top:        50%; /* [2] */
    left:       50%; /* [2] */
    transform:  translate(-50%, -50%); /* [2] */
    height:     5.5555vh;
  }

  .header__student-name {
    position:       absolute;
    top:            3.7777vh;
    right:          5vw;
    color:          #ffffff;
    font-size:      1.3333vh;
    font-weight:    bold;
    text-transform: uppercase;
    letter-spacing: .15vw;
  }

  .header__self-information:visited { color: #ffffff; }





/*------------------------------------*\
  #CHAT
\*------------------------------------*/

/**
 * 1. Si el contenido de la ventana de chat fuera más grande que la ventana,
 * usaríamos este parámetro para que la ventana se desplazara (scroll en inglés).
 * No lo necesitaremos en esta tarea, porque el design entra en la ventana,
 * pero es bueno que lo sepas por si lo necesitas en una tarea de la vida real.
 *
 * 2. Podemos ocultar el scrollbar con esta configuración en los navegadores Firefox.
 *
 * 3. Podemos ocultar el scrollbar con esta configuración en Internet Explorer y Edge.
 *
 * 4. Podemos ocultar el scrollbar con este pseudo elemento en Chrome, Safari y Opera.
 *
 *
 */

.chat {
  height:             75.5555vh;
  overflow-y:         scroll; /* [1] */
  scrollbar-width:    none; /* [2] */
  -ms-overflow-style: none; /* [3] */
  padding:            4.4444vh 3.75vw 6.6666vh 3.75vw;
}

.chat::-webkit-scrollbar { display: none; } /* [4] */

  .message { position: relative; }

  .chat__typing-indicator,
  .message__timestamp {
    float:          left;
    margin:         0 0 .5555vh 3.75vw;
    color:          #b2acba;
    font-size:      1.3333vh;
    font-weight:    bold;
    text-transform: uppercase;
    letter-spacing: .15vw;
  }

  small {margin-bottom: .5555vh}

  .message__timestamp--self {
    float:        right;
    margin-left:  0;
    margin-right: 3.75vw;
  }

  .message__content {
    max-width:        37.5vw;
    padding:          2.2222vh 1.25vw;
    border-radius:    0 15px 15px 15px;
    margin:           0 0 1.1111vh 3.75vw;
    background-color: #ffffff;
    line-height:      2.2222vh;
  }

  .conversation__message--self {
    border-radius:    15px 15px 0 15px;
    margin-left:      0;
    margin-right:     3.75vw;
    background-color: #b2acba;
    color:            #ffffff;
  }





/*------------------------------------*\
  #EDITOR DE MENSAJE
\*------------------------------------*/

.message-editor {
  height:           15.5555vh;
  padding:          2.2222vh 3.75vw 2.2222vh 1.25vw;
  border-left:      .0625vw solid;
  border-color:     #f4f3f5;
  background-color: #ffffff;
}

  .message-editor__form { position: relative; }

  .message-editor__textarea {
    position:         absolute;
    width:            66.25vw;
    height:           11.1111vh;
    padding:          2.2222vh 0 1.4444vh 1.5vw;
    border:           0;
    border-bottom:    .3333vh solid;
    border-color:     transparent;
    margin-bottom:    1.6666vh;
    background-color: #f4f3f5;
    outline:          none;
  }

  .message-editor__textarea:focus { border-bottom-color: #6200ea; }

  .message-editor__textarea::placeholder {
    font-weight: bold;
    opacity:     .25;
  }

  .message-editor__attachment:visited { color: #211138; }

  .message-editor__send-message {
    position:       absolute;
    right:          0;
    margin-right:   0;
    width:          5.5555vh; /* [] */
    height:         5.5555vh; /* [] */
    border-radius:  50%; /* [] */
    text-align:     center;
  }