.profile
  font-size: $font-size-sm
  font-weight: 400

.profile-main
  padding: 0 $column-gutter/2

  @media #{$medium-up}
    width: grid-calc(8, 12)
    float: right
    padding: 0 0 0 $column-gutter/2

  header
    h1
      margin: 0 1.7rem 0 0
      color: #808080
      font-size: 35px
      font-weight: 400
      line-height: 1.45
    p:not(.sync-last)
      font-size: $font-size-sm
      color: $grey-light
      margin: 2rem 0 1rem 0
      a
        color: $grey-light
        text-decoration: underline
    @media #{$medium-up}
      .profile-header, .sync-button, .ember-view
        display: inline-block
        vertical-align: middle
      .sync-button
        margin-top: .5em
    @media #{$large-up}
      .profile-header
        position: relative
        white-space: nowrap;
        max-width: 77%;
        overflow: hidden;
        &:after
          @include fadeOut(right, -90deg, $white)

  .loading-indicator--white
    vertical-align: top
    margin-right: .5em
  p
    font-size: $font-size-m
    color: $grey-medium

  .cta-btn
    text-align: right

.profile-getstarted
  position: relative
  margin-bottom: 3rem
  background-color: $cream-light
  @extend %border-radius-4px
  ol
    @include resetul
    padding: 1em 0
  figure
    margin: 0
  figcaption
    width: 90%
    margin: auto
    padding: 0 1em 0 2.8em
    text-align: center
    @media #{$medium-up}
      text-align: left
  img
    display: block
    margin: 0 auto 1em

  .dismiss
    position: absolute
    top: 0
    right: 0
    padding: .5em
    z-index: 99
  @media #{$medium-up}
    li:not(:last-child)
      img
        padding: 0 3.2em
        border-right: solid 2px #f3f2f2

.profile-orgs,
.profile-user

  .media-elem
    width: 14%
    img
      width: 2.6rem
      height: 2.6rem
      border-radius: 50%
  .media-body
    width: 86%
  p
    margin: 0
  ul
    @include resetul
  li
    margin: 1.5rem 0 2.5rem
  a
    @extend %inline-block
    width: 100%
    &:hover
      h1, h2
        text-decoration: underline

.profile-user h1,
.profile-orgs h2
  font-size: $font-size-sm
  margin: 0
  font-weight: 600
  line-height: 1

.profile-orgs
  h1
    color: #898b8c
    font-size: $font-size-sm
    border-bottom: solid 2px $cream-dark

.profile-user
  margin: 1rem 0 2rem

p.profile-user-last
  margin-top: .5em


.profile-orglist
  @media #{$large-up}
    padding-right: 10em
    aside
      padding: 0

.profile-hooklist
  @include resetul
  font-size: $font-size-m
  li
    clear: both
    margin-bottom: .8em
    // overflow: auto
  .profile-hooks
    width: grid-calc(10, 24)
    display: inline-block
    vertical-align: middle
    @media #{$medium-up}
      width: grid-calc(5, 24) - 1%
    @media #{$large-up}
      width: grid-calc(5, 24) - 1%
  .switch
    display: inline-block
    vertical-align: middle
  .profile-settings
    display: inline-block
    padding: .2em .2em .2em .5em;
    height: 28px;
    vertical-align: bottom;
    .icon
      width: 14px
      height: 14px

.profile-hooklist .sync-spinner
  display: inline !important

.profile-settings span
  display: inline-block !important

.profile-repo
  @extend %border-radius-4px
  position: relative
  display: inline-block
  width: grid-calc(13, 24)
  padding: .25em .5em .3em
  white-space: nowrap
  overflow: hidden
  vertical-align: middle
  span:not(.loading-indicator)
    display: none
    margin-left: 1rem
    font-size: $font-size-sm
    color: darken($grey-dark, 10)
    line-height: 1
  .sync-spinner
    vertical-align: top
  &:hover
    background-color: #ededec
    &:after
      content: ""
      @include fadeOut(right, -90deg, #ededec)
  .active &:hover
    background-color: #e2eee2
    &:after
      content: ""
      @include fadeOut(right, -90deg, #e2eee2)
  @media #{$medium-up}
    width: grid-calc(18, 24)
    height: 30px
    &:hover
      span
        display: inline-block
  @media #{$large-up}
    width: grid-calc(19, 24)


.profile-additional
  border-top: solid 2px #f3f2f2
.profile-text,
.profile-additional p
  color: #adaaab
  line-height: $line-height-m
  a
    color: #adaaab
    text-decoration: underline

.hooks-error
  width: 100%;
  padding: 0 $column-gutter/2;
  margin-top: 3.3rem;
  p
    position: relative
    padding: $column-gutter/2 $column-gutter*2 $column-gutter/2 $column-gutter/2;
    color: #de4248
    background-color: #f1b6ad
    a
      color: #de4248
      text-decoration: underline
    &:after
      content: ""
      position: absolute
      top: -0.5em
      left: 1.5em
      width: 1.2em
      height: 1.2em
      background: #f1b6ad
      transform: rotate(45deg)
  .close
    @extend .icon
    position: absolute
    top: 1em
    right: 1em
    @extend .icon--dismiss-red


#unadministerable-hooks
  p
    margin-top: 2em