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

  100%
    background-position: 50px 0

.zooniverse-dialog
  display: block;
  font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif
  height: 100%
  left: 0
  position: fixed
  top: 0
  width: 100%
  z-index: 100

  .underlay
    background: rgba(#000, 0)
    display: table
    width: 100%
    transition: background-color 0.5s ease-in-out
    height: 100%

    .container
      display: table-cell
      text-align: center
      vertical-align: middle
      perspective: 1000px

      .dialog
        background: #f4f4f4
        border-top: 5px solid #050505
        box-shadow: 0 3px 5px rgba(#000, 0.5)
        color: #000
        display: inline-block
        max-width: 33%
        opacity: 0
        padding: 30px
        position: relative
        text-align: left
        text-shadow: none
        transform: translateY(-25%) rotateX(30deg) scale(0.75)
        transition: opacity 0.25s ease-in-out, transform 0.33s ease-in-out

        > form > button[name="close-dialog"]
          font-size: 16px
          height: 1em
          position: absolute
          right: 4px
          top: 0
          width: 1em

  &.warning .underlay .container .dialog
    border: 5px solid #f90

  &.error .underlay .container .dialog
    border: 5px solid #c30

  &.showing .underlay
    background: rgba(#000, 0.5)

    .container .dialog
      opacity: 1
      transform: translateY(0) rotateX(0) scale(1)

  button
    background: transparent
    border: 0
    color: inherit
    cursor: pointer
    font: inherit
    margin: 0
    padding: 0

  a
    border: 0
    color: inherit
    text-decoration: underline

    &:hover
      color: inherit

  header
    font-size: 16px
    margin-bottom: 20px

    .zooniverse-logo
      display: inline-block
      height: 25px
      margin-right: 5px
      position: relative
      top: -2px
      vertical-align: middle
      width: 25px

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

  .loading .loader
    display: block

  label
    display: block
    margin: 10px 0

    &.checkbox
      line-height: 1.5em
      margin-left: 20px

  input
    background: #f0f0f0
    border: 1px solid #ccc
    box-sizing: border-box
    box-shadow: 0 1px 0 #fff
    font-size: 12px
    padding: 10px

    &[type="text"],
    &[type="email"],
    &[type="password"]
      width: 100%

    &[type="checkbox"]
      margin-left: -20px

  .explanation
    font-size: 10px;
    line-height: 1.3em
    margin: 5px 13px
    opacity: 0.75

  .error-message
    color: darken(#f00, 50%)
    font-weight: bold
    text-align center

  .action
    margin: 1em 0
    text-align: center

    button
      background: #fff
      border: 1px solid #bbb
      border-radius: 3px
      box-shadow: 0 1px 0 #fff inset, 0 1px 3px rgba(#000, 0.25)
      font-size: 12px
      font-weight: bold
      margin: 0 5px
      padding: 3px 10px

      &:active
        border-color: rgba(#000, 0.25)
        box-shadow: 0 100px rgba(#000, 0.125) inset