@import "_mixins/all"

#profile
  #unadministerable-hooks
    margin-top: 15px
    h3
      font-size: $font-size-big
    .tip
      margin-top: 5px

#hooks, #unadministerable-hooks
  // @include list-base
  margin-top: 10px

  li
    position: relative
    height: 19px
    padding: 10px
    white-space: nowrap
    overflow: hidden
    border-bottom: 1px solid $color-border-light

    &:nth-child(3)
      border-top: 1px solid $color-border-light

    &:nth-child(odd)
      background-color: $color-bg-hooks-odd
      .controls
        background: $color-bg-hooks-odd

    &:nth-child(even)
      background-color: $color-bg-hooks-even
      .controls
        background: $color-bg-hooks-even

    > a
      float: left
      font-size: $font-size-big
      text-decoration: none

    .description
      display: none
      margin-left: 10px
      line-height: 22px
      font-size: $font-size-smaller
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      color: $color-text-light

    .controls
      position: absolute
      top: 10px
      right: 0
      white-space: nowrap
      a
        float: left
        display: block

    .github-admin
      // Overriding an earlier definition above, which is probably
      // obsolete. TODO: Remove if so.
      position: relative
      height: 20px
      width: 20px
      padding-right: 0
      background: inline-image('ui/github-admin.png') no-repeat 3px 4px

    .switch
      position: relative
      display: block
      width: 60px
      height: 18px
      margin: 0 10px 0 15px
      padding: 0 10px 0 0
      @include background(linear-gradient(#eee, #fff))
      @include box-shadow(#ccc 0px 2px 3px 0px inset)
      border: 1px solid #bdbdbd
      @include border-radius(4px)
      line-height: 21px
      font-size: 11px
      color: #999
      cursor: pointer
      text-align: right
      &:before
        content: ""
        position: absolute
        top: -1px
        left: -1px
        width: 28px
        height: 18px
        @include background(linear-gradient(#ddd, #fff))
        @include box-shadow(#fff 0px 1px 3px 0px inset)
        border: 1px solid #bdbdbd
        @include border-radius(4px)

    &.active .switch
      width: 56px
      padding: 0 0 0 14px
      @include background(linear-gradient(#3a78f9, #93bafc))
      @include box-shadow(#2153be 0px 2px 3px 0px inset)
      border: 1px solid #4b7cde
      color: #fff
      text-align: left
      &:before
        left: auto
        right: -1px


    &:hover
      > a
        color: $color-link-highlight

      .description
        display: inline

