// variables for width

$modal-width: 980px
$modal-height: 580px
$modal-gut: 15px
$modal-postboard-height: $modal-height - 3*$modal-gut
$modal-left-col: 400px
$modal-right-col: ($modal-width - 2*$modal-gut) - $modal-left-col - $modal-gut
$modal-postboard-post-height: 100%

/*************************************
 ******************* PROFILE MODAL
 ***************************************/

.profile-modal
  .modal-wrapper
    width: $modal-width
    max-width: 98%
    +box-sizing(border-box)
    height: $modal-height
    margin: 0-($modal-height/2) 0 0 0-($modal-width/2)
    h3
      display: none

  .profile-data
    display: block
    margin: auto
    padding-top: 0

    @extend .clear-fix
    li
      display: inline
      margin: 0 5px
      float: none
      a
        display: inline
        span
          &.posts-count, &.following-count, &.followers-count
            display: inline-block
            padding-right: 5px

  .modal-content
    overflow: hidden
    padding: 0
    position: relative
    #profile-posts
      padding: 0

    .postboard
      margin-left: 0
      height: 100%
      bottom: 0
      position: relative
      float: right
      width: $modal-right-col!important

    .postboard-posts
      display: block
      height: $modal-postboard-post-height
      overflow-y: auto
    .postboard-posts .post
      padding: 0
    .post-interactions
      margin: 2px 10px 3px 60px
    .profile-card
      margin: 0
      padding: 0

    .members
        overflow-y: auto

.profile-modal
  h2.profile-screen-name
    display: block
    letter-spacing: 0
    text-transform: none
    color: lighten($dark-grey, 30%)
    padding:  5px 0
    margin: 0
    font-size: 13px
    line-height: 13px


/* Profile card*/

.profile-card
  height: 100%
  background: white
.profile-card-main
  position: relative
  text-align: center
  word-wrap: break-word
  transition: all .2s linear
  background: none!important
  padding: 10px


  h1
    font-size: 22px
    font-weight: bold
    display: inline-block
    padding-top: 10px

  &:before
    content: ""
    border: solid 0px #fff
    transition: all .2s linear
    position: absolute
    left: 1px
    top: 1px
    right: 1px
    bottom: 1px
    z-index: 0
  *
    position: relative
    z-index: 1

.profile-card-photo
  height: 75px
  margin: 0 auto
  display: block
  width: auto

.profile-bio
  padding: 10px
  font-style: italic
  text-align: center


.profile-card
  float: left
  width: $modal-left-col
  position: relative
  padding: $modal-gut

  .direct-messages-with-user, .follow, .unfollow
    display: inline-block
    position: static

  .isFollowing:after
    font-size: 15px
    position: absolute

  .unfollow
    background: $main-color-light

  .twister-user-info
    @extend .clear-fix
    text-align: center
    width: 100%
    padding: 0

  .follow
    background: $main-color-color

  .known-followers
    text-align: center
    clear: both
    width: 100%


#msngrswr
  display: none
  text-align: center
  margin: 10px 0

.profile-extra-contact
  display: none
  margin: 0 15px 0 0
  font-weight: 500
  background: $background-light
  padding: 2px 8px 3px 8px
  +border-radius(2px)


.bitmessage-ctc, .tox-ctc
  font-size: 13px
  line-height: 15px
  cursor: pointer
  color: $main-color-dark
  &:hover
    color: $main-color-color

.bitmessage-ctc:after, .tox-ctc:after
  font-family: $symbol-font-family
  content: ''
  font-style: normal
  font-weight: normal
  speak: none
  display: inline-block
  text-decoration: inherit
  width: 1em
  text-align: center
  font-variant: normal
  text-transform: none
  line-height: 1em

.profile-modal
  .profile-tox, .profile-bitmessage
    display: inline-block
    margin-right: 5px
    font-size: 13px
    &:hover
      color: $main-color-color


.profile-modal .modal-buttons
  display: none

.selectable_theme.theme_calm
  display: none

/*************************************
************ ACCOUNT MODAL ***********
**************************************/

.account-modal
  &.modal-wrapper
    width: 580px
    height: 394px
    margin: -197px 0 0 -290px
  .modal-content
    padding: 0
  .module
    margin: 4px
    > div
      margin: 4px 0
      padding: 4px 12px
  input, textarea
    display: block
    border: 1px solid rgba(0, 0, 0, .1)
    width: 320px
    margin: 12px 16px
    padding: 2px 4px
  textarea
    width: 320px
    max-width: 320px
    min-width: 320px
    min-height: 28px
  input:focus, textarea:focus
    border-bottom: solid 1px $color-green
  .alias
    margin: 0px 16px
  .avatar
    position: absolute
    right: 12px
    top: 42px
    cursor: pointer
    width: 64px
    height: 64px
    overflow: hidden
    margin: 12px 16px
    img
      width: 64px
      height: auto
      border: 1px solid rgba(0, 0, 0, .1)
  .c-buttons
    text-align: right
  .toggle-secret-key
    float: left
  .secret-key-container
    text-align: center
    font-size: 12px
  .secret-key
    background-color: $bloc-background-color
    font-weight: bold