MiniProfile {
  overflow: hidden
  display: flex
  border: 1px solid transparent
  transition: border 0.2s, background-color 0.2s
  padding: 5px 10px
  border-radius: 5px
  height: 60px

  -pub {
    div.main {
      div.displayName {
        color: #CCF
      }
    }
    div.image {
      background: linear-gradient(100deg, #CCF, #FCC);
    }
  }

  div.image {
    border-radius: 25px;
    overflow: hidden;
    height: 50px;
    width: 50px;
    background: linear-gradient(100deg, #c7af84, rgba(0,0,0,0));
    background-color: #777;
    background-size: cover;
    background-position: 50% 50%;
  }
  div.main {
    padding: 10px
    min-width: 100px
    flex: 1
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 90%, rgba(0,0,0,0))

    div.displayName {
      white-space: nowrap
      color: #CFF
    }
    div.info {
      color: #888
      span {
        color: #BBB
      }
    }
  }
  :hover {
    border-color: #444
    background-color: rgba(255, 255, 255, 0.18);
  }
}