@import '../../../styles/mixins.sass'
@import '../../../styles/vars.sass'

#profile-page
  position: fixed
  width: 100%
  height: calc(100% - 56px)
  overflow: scroll

#profile 
  padding: 2em
  max-width: 1200px
  margin: 0 auto

#profile-card-container
  margin: 0 auto
  width: 100%
  max-width: 690px
  .icon-box
    text-align: right
    width: 100%
.request-button
  margin-top: 0.5em
  margin-bottom: 0.5em
  margin-left: auto
#toolbar
  margin-top: 32px
  .mat-toolbar-row
    max-height: 40px
  
#username
  margin: 0 0.5em
#handle
  font-size: 14px
#info
  font-size: 14px
  margin-left: calc(100px + 0.5em)

.mat-table
  width: 100%
  max-width: 690px
  margin: 0 auto
.mat-header-cell
  padding-right: 0.5em

$mat-card-header-size: 100px !default
.profile-picture
  background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
  height: $mat-card-header-size
  width: $mat-card-header-size
  border-radius: 50%
  flex-shrink: 0
  background-size: cover
  // Makes `<img>` tags behave like `background-size: cover`. Not supported
  // in IE, but we're using it as a progressive enhancement.
  object-fit: cover



#postlist
  margin: 0.5em auto
  padding: 0
  max-width: 690px