#ZOONIVERSE_RESET_BUTTON
  background: transparent
  border: 0
  color: inherit
  cursor: pointer
  font: inherit
  margin: 0
  padding: 0
  text-shadow: inherit
  text-transform: inherit

.zooniverse-top-bar
  background: #000
  color: #fff
  font: bold 11px "Helvetica Neue", Arial, Helvetica, sans-serif
  line-height: 1
  padding-right: 5px
  position: absolute
  right: 0
  text-align: center
  text-shadow: none
  top: 0
  z-index 100

  > .corner
    bottom: 0
    position absolute
    right: 100%
    top: 0
    width: 20px

    svg
      height: 100%
      width: 100%

    path
      fill: #000
      stroke: transparent
      stroke-width: 0

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

  button
    @extends #ZOONIVERSE_RESET_BUTTON

  .piece
    display: inline-block
    margin: 5px
    vertical-align: middle

  .no-user
    display: inline-block

  .zooniverse-info
    font-size: 13px

  .zooniverse-logo
    height: 25px
    margin: -2px 5px 0 0
    vertical-align: middle
    width: 25px

  .sign-in
    font-size: 10px
    text-transform: uppercase

    .separator
      opacity: 0.5

  .current-user
    display: none

  .user-info
    margin-left: 10px

  .zooniverse-mail-icon
    height: 0.75em

  .current-user-name
    font-size: 13px
    font-weight: bold

  .sign-out
    font-size: 8px
    text-transform: uppercase

  .groups
    display: none

    select
      max-width: 100px

      &:disabled
        opacity: 0.33

  .messages
    display: none

  .avatar
    margin: 0

    img
      border: 0
      height: 30px
      width: 30px

  .languages
    display: none

  &.signed-in
    .no-user
      display: none

    .current-user
      display: inline-block

  &.has-groups .groups
    display: inline-block

  &.group-participant button[name="groups"]
    color: #0f0

  &.has-messages .messages
    display: inline-block

  &.has-languages .languages
    display: inline-block

.zooniverse-dropdown-menu.from-top-bar
  backface-visibility: hidden // This prevents flicker for some reason.
  background: #000
  border: 1px solid #999
  box-shadow: 0 3px 10px rgba(#000, 0.5)
  color: #fff
  font: 12px "Helvetica Neue", sans-serif
  opacity: 0
  transform: translateY(-10px)
  transition:
    opacity 0.25s ease-in-out,
    transform 0.25s ease-in-out
  z-index: 101

  &.open
    opacity: 1
    transform: translateY(0)

.zooniverse-groups-menu,
.zooniverse-languages-menu
  text-align: center

  button
    @extends #ZOONIVERSE_RESET_BUTTON

    border-bottom: 1px solid rgba(#fff, 0.25)
    padding: 3px 15px
    width: 100%

    &:hover
      background: rgba(#fff, 0.25)

    &.active
      background: rgba(#0f0, 0.5)

    &.stop
      font-size: 10px
      // font-weight: bold