#profiles-list sib-display-lookuplist {
  &[name$='skills'] {
    display: flex;

    li,
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      margin: 1em -0.25em;
    }

    li {
      padding: 0.3em 1.2em;
      border: 1px solid;
      border-radius: 2em;
      margin: 0.25em;
      background-color: $color-yellow;
      color: $color-white;
      font-weight: bold;
    }
  }
}

#profiles-list > div > sib-display {
  cursor: pointer;
}

#profiles-list > div > sib-display {
  display: flex;
  flex-direction: column;
  position: relative;
  @extend %frame;
  padding: 1em;

  label {
    display: none;
  }

  div[name='header'] {
    border-bottom: 1px solid $color-grey-light;
    padding-bottom: 1em;
    padding: 0.5em;
    margin-bottom: 1em;
    display: flex;
    flex-direction: column;
    >*{
      display: flex;
      justify-content: center;
      flex-basis: content;
    }
    sib-display-img {
      flex-basis:150px;
      img {
        border-radius: 100%;
        width:150px;
      }
    }
  }

  hdapp-userinfo {
    @extend h1;
  }

  [name=infos] {
    margin: 2em 0;

    > * {
    //  display: block;
      margin: 0.5em 0;
    }
  }

  ul[name$='roles'] * {
    @include icon('user');
  }

  ul[name$='cell'] * {
    @include icon('location-pin');
  }
  [name$='user'] {
    margin-bottom: 0em;
  }
  sib-display-div[name$='bio'] {
    margin-top: 1em;
    flex-basis : 5em;
  }

  a[href^='mailto'] {
    display: flex;
    border-radius: 25px;
    border-style: solid;
    border-color: $color-blue-light;
    color: $color-blue-light;
    margin: 1em;
    padding: 1em;
    text-decoration:none;
  }

  sib-display-tel {
    display: block;
    @include icon('phone');
  }

  hdapp-hyperlink {
    display: block;
    @include icon('link');
  }

  sib-display-div[name$='foaf:homepage'] * {
    @include icon('link');
  }
  sib-display-div[name$='more']{
    display: flex;
    flex-direction: row-reverse;
  }
}

#profiles-list {
  @extend .grid-layer;
  > sib-form {
    grid-column-start: start;
    grid-column-end: middle;
    grid-row-start: start;
    grid-row-end: middle;
  }
  > div {
    background: violet;
    grid-column-start: start;
    grid-column-end: end;
    margin-bottom: 1em;
    /*grid-row-start: middle;
    grid-row-end: end;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 1em;*/
    display: flex;
    justify-content: space-between;
    
    &:first-of-type {
      background: aquamarine;
      justify-content: center;
    }
  }
}

#profiles-list > sib-form > form {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 3.5em 3.5em;

  label {
    flex-basis: 5em;
    flex-shrink: 0;
  }

  input, select {
    flex-grow: 1;
    min-width: 0;
  }

  input[type="submit"] {
    display: none;
  }
}

#profiles-list {
  ul {
    @include list-reset();
  }
}