/**
 * PREZENTARE GENERALĂ
 *
 * Acest fișier descrie componentele care alcătuiesc site-ul.
 * De la layout-ul interior până la culoarea fontului etc.
 *
 * L-ai mai văzut, dar acum, gândirea BEM (Block–Element–Modifier)
 * este și mai evidentă în acest cod. Dacă auzi de BEM
 * pentru prima dată, îți recomandăm să citești secțiunea următoare
 * în CSS guidelines: https://cssguidelin.es/#bem-like-naming al lui Harry Roberts.
 */


/**
 * CUPRINS
 *
 * 1. BUTOANE
 *
 * 2. FOTOGRAFII DE PROFIL
 *
 * 3. ICONURI
 *
 * 4. SIDEBAR
 *
 * 5. HEADER
 *
 * 6. CHAT
 *
 * 7. EDITOR MESAJE
 */





/*------------------------------------*\
  #BUTOANE
\*------------------------------------*/

/**
 * 1. Înlăturăm border-ul pentru a nu ne incomoda când facem padding-ul.
 * De asemenea, nu este necesar să punem border-uri pe un întreg buton. :)
 *
 */

 .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; }





/*------------------------------------*\
#FOTOGRAFII DE PROFIL
\*------------------------------------*/

/**
 * 1. Ca și la blog, cu această property putem afișa toate fotografiile
 * în cadre frumoase, circulare, fără a le comprima,
 * indiferent de proporțiile lor originale.
 */

.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;
  }





/*------------------------------------*\
#ICON-URI
\*------------------------------------*/

.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;
  }





/*------------------------------------*\
  #SIDEBAR
\*------------------------------------*/

.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;
    }





/*------------------------------------*\
  #HEADER
\*------------------------------------*/

/**
 * 1. Alegem proprietatea position pentru layout-ul componentei.
 * Am poziționat logo-ul în funcție de relative container.
 * Dacă vrei să citești mai multe despre această tehnică,
 * citește modulul intitulat  „Totul la loc”.
 *
 * 2. Cu această metodă centrezi lucrurile cu ușurință.
 * Poți afla mai multe despre asta aici:
 * 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. Dacă conținutul ferestrei chat ar fi mai înalt decât fereastra în sine
 * am putea folosi acest parametru pentru a face fereastra scroll-abilă. Nu îți
 * va fi de folos în această misiune deoarece design-ul se potrivește în
 * fereastră dar îți va fi de folos să știi într-un proiect în viața reală.
 *
 * 2. Putem ascunde scrollbar-ul cu această setare în browserele Firefox.
 *
 * 3. Putem ascunde scrollbar-ul cu această setare în Internet Explorer și Edge.
 *
 * 4. Putem ascunde scrollbar-ul cu acest pseudo element în Chrome, 
 * Safari și 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 MESAJE
\*------------------------------------*/

.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;
  }