#member-profile {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  .member-info {
    background-color: $color-0-0-100;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
    margin: 2rem 1rem 5rem 2rem;
    min-height: 100vh;

    .member-bio {

      div[name='member-profile__bio'] {
        border-bottom: 1px solid $color-221-51-90;
        display: grid;
        grid-template-areas: "avatar name status"
          "avatar pseudo status"
          "avatar bio status"
          "avatar list button";
        grid-template-columns: 1fr 2fr 1fr;
        padding: 4.5rem;

        div[name='member-img'] {
          grid-area: avatar;
          overflow: hidden;
          position: relative;

          img {
            border-radius: 50%;
            object-fit: cover;
            max-width: 90% !important;
          }
        }

        div[name='member-profile'] {
          align-items: baseline;
          align-self: end;
          display: flex;
          grid-area: name;

          >sib-display-value[name^='user.'] {
            color: $color-216-4-22;
            font-weight: bold;
            @extend h1;
          }

          >sib-multiple[name$='groups'] {
            display: flex;
            padding-left: 1.4rem;
          }
        }

        sib-display-value[name='user.username'] {
          grid-area: pseudo;

          &::before {
            content: '@';
          }
        }

        sib-display-value[name='bio'] {
          grid-area: bio;
        }

        div[name='infos'] {
          grid-area: list;

          @extend %member-info;
        }

        member-status[name$='available'] {
          align-self: flex-end;
          color: $color-244-73-62;
          grid-area: status;
          justify-self: flex-end;

          span {
            align-items: center;
            align-self: center;
            display: flex;
            flex-direction: column;
            font-weight: 600;
            line-height: 2;
          }

          span.status-one {
            @include ci('awareness');

            &::before {
              border-bottom: 2px solid $color-43-100-50;
              font-size: 7.3rem;
              padding-bottom: 1.5rem;
            }
          }

          span.status-two {
            @include ci('armor');

            &::before {
              border-bottom: 2px solid $color-43-100-50;
              font-size: 7.3rem;
              padding-bottom: 1.5rem;
            }
          }
        }

        sib-action[name='send'] {
          align-self: flex-end;
          grid-area: button;
          justify-self: flex-end;
        }

        [next=messages] {
          @include icon('speech');
          border: 1px solid $color-244-73-62;
          border-radius: 2em;
          color: $color-244-73-62;
          font-size: 18px;
          font-weight: bold;
          justify-self: end;
          padding: 0.6em 1.5em 0.4em;

          &::before {
            font-size: 25px;
            padding-right: 0.5em;
          }
        }
      }
    }

    .member-skills {

      label {
        float: left;
        font-weight: bold;
        display: block;
        padding-bottom: 0.5rem;
      }
    }
  }
}