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

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

#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

  .info-box
    font-size: 14px
    margin-left: calc(100px + 0.5em)

  .info
    margin-right: 1em
    font-size: 14px

  #username
    margin: 0 0.5em

  #handle
    font-size: 14px

#icon
  display: none
  position: absolute
  z-index: 11
  color: white

$mat-card-header-size: 100px !default

.user-profile-picture
  cursor: pointer
  z-index: 11
.hover-box
  text-align: center
  display: flex
  justify-content: center
  align-items: center

  &:hover
    .profile-picture
      filter: brightness(70%)

    #icon
      display: block
      filter: none
// Makes `<img>` tags behave like `background-size: cover`. Not supported
// in IE, but we're using it as a progressive enhancement.

.profile-picture
  height: $mat-card-header-size
  width: $mat-card-header-size
  border-radius: 50%
  flex-shrink: 0
  background-size: cover
  transition-duration: 0.5s
  z-index: 10
  object-fit: cover

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