/**
 * OVERVIEW
 *
 * This file describes the components that build up the site.
 * From the inner layout to the font color, etc.
 *
 * You could see it before, but now, BEM-like (Block–Element–Modifier)
 * thinking is even more apparent in the code. If you are hearing
 * about BEM for the first time, we recommend reading the following section
 * in Harry Roberts’s CSS guidelines: https://cssguidelin.es/#bem-like-naming.
 */


/**
 * TABLE OF CONTENTS
 *
 * 1. BUTTONS
 *
 * 2. PROFILE PICTURES
 *
 * 3. ICONS
 *
 * 4. SIDEBAR
 *
 * 5. HEADER
 *
 * 6. CHAT
 *
 * 7. MESSAGE EDITOR
 */





/*------------------------------------*\
  #BUTTONS
\*------------------------------------*/

/**
 * 1. We remove the border so it won’t bother us when doing the padding.
 * Also, it is unnecessary to put borders on a full button. :)
 *
 */

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





/*------------------------------------*\
  #PROFILE PICTURES
\*------------------------------------*/

/**
 * 1. Similarly to your blog, with this property, we can display all pictures
 * in nice, circular frames, without compressing them,
 * regardless of their original proportions.
 */

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





/*------------------------------------*\
  #ICONS
\*------------------------------------*/

.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. We chose the position property for the layout of the component.
 * We positioned the logo relative to the relative container.
 * If you’d like to read more about this technique,
 * read our module titled  „Everything in its place”.
 *
 * 2. With this method, you can center things easily.
 * You can find more info about it here:
 * 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. If the contents of the chat window were taller than the window itself
 * we could use this parameter to make the window scrollable. You won’t
 * need it in this assignment, because the design fits inside the window,
 * but the knowledge will be useful during a real-life assignment.
 *
 * 2. We can hide the scrollbar with this setting in Firefox browsers.
 *
 * 3. We can hide the scrollbar with this setting in Internet Explorer and Edge browsers.
 *
 * 4. We can hide the scrollbar with this pseudo element in Chrome, Safari and Opera browsers.
 *
 *
 */

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





/*------------------------------------*\
  #MESSAGE EDITOR
\*------------------------------------*/

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