@keyframes zooniverse-progress
  0%
    background-position: 0 0

  100%
    background-position: 50px 0

.zooniverse-profile
  .loader
    animation: 2s zooniverse-progress linear infinite
    background: linear-gradient(left top, transparent 25%, #808080 25%, #808080 50%, transparent 50%, transparent 75%, #808080 75%)
    background-size: 25px 25px
    bottom: -10px
    display: none
    left: -10px
    opacity: 0.25
    position: absolute
    right: -10px
    top: -10px
    z-index: -1

  .loading .loader
    display: block

  .sign-in-form
    display: block
    margin: 0 auto
    position: relative
    text-align: center
    width: 50%

    header
      font-size: 32px

    label
      display: block
      margin: 20px 0

    input
      background: #fff
      border: 0
      border-radius: 3px
      box-sizing: border-box
      box-shadow:
        0 1px 1px rgba(#000, 0.5) inset,
        0 1px 0 rgba(#fff, 0.25)
      font-size: 18px
      padding: 10px
      width: 100%

    .error-message
      background: darken(#f00, 25%)
      border-radius: 3px
      box-shadow: 0 3px 5px rgba(#000, 0.5)
      color: #fff
      font-weight: bold
      display: inline-block
      padding: 0 1em

    .action
      margin: 20px

      button
        background: #fff
        border: 0
        border-radius: 3px
        box-shadow: 0 3px 5px rgba(#000, 0.5)
        color: #000
        font-size: 18px
        font-weight: bold
        padding: 5px 1em

    .no-account
      font-weight: bold;

      button
        text-decoration: underline

  & > nav
    display: none
    overflow: hidden

    button
      border-radius: 2em
      font-weight: bold
      padding: 0 1em

      &.active
        background: rgba(#000, 0.25)
        box-shadow: 0 1px 2px rgba(#000, 0.5) inset
        text-shadow: 0 1px 1px rgba(#000, 0.75)

  .zooniverse-paginator
    display: none
    position: relative

    .items
      margin: 1em -10px
      overflow: hidden;

      .item
        box-sizing: border-box
        float: left
        padding: 10px
        position: relative
        width: 25%

        button[name="unfavorite"]
          color: #fff
          font-size: 20px
          height: 1em
          position: absolute
          right: 15px
          text-shadow: 0 1px 1px #000
          top: 15px
          width: 1em

        a
          border: 2px solid transparent
          display: block

          img
            background: rgba(#808080, 0.25)
            box-shadow: 0 3px 5px rgba(#000, 0.5)
            display: block
            min-height: 50px
            width: 100%

          &:hover
            border-color: inherit

    .controls
      text-align: center
      font-size: 10px
      font-weight: bold

      button
        border-radius: 1em
        height: 2em
        line-height: 1
        width: 2em

        &.active
          background: rgba(#000, 0.25)
          box-shadow: 0 1px 2px rgba(#000, 0.5) inset
          text-shadow: 0 1px 1px rgba(#000, 0.75)

  .empty-message
    display: none
    margin: 1em 0
    text-align: center

  &.signed-in
    .zooniverse-login-form
      display: none

    & > nav,
    .zooniverse-paginator.active
    .zooniverse-paginator.active.empty + .empty-message
      display: block

    .zooniverse-paginator.empty
      display: none