@import "_mixins/all"

.help
  display: inline-block
  height: 19px
  width: 16px
  margin: -4px 0 0 3px
  vertical-align: middle
  background:
    image: inline-image('ui/help.svg')
    repeat: no-repeat
    position: 0 1px
    color: transparent
    size: 100%
  cursor: pointer

.popup
  top: 50%
  left: 50%
  width: 400px
  margin: -200px 0 0 -200px
  padding: 20px
  @include popup
  @include box-sizing(border-box)

  .close
    position: absolute
    display: block
    right: 10px
    top: 10px
    width: 16px
    height: 16px
    background:
      image: inline-image('ui/close.svg')
      repeat: no-repeat
      size: 100%

  h4
    margin-top: 0
    font-size: 18px
    font-weight: bold
    color: $color-text

  p
    font-size: $font-size-normal

  pre
    background-color: $color-bg-pre
    margin: 0
    padding: 10px 20px
    @include border-radius(4px)

#status-images
  display: none
  width: 600px
  margin: -95px 0 0 -300px

  p
    margin: 0
    label
      width: 100px
      display: inline-block
      vertical-align: top
    textarea
      border: 1px solid $color-border-light
      width: 485px
      padding: 4px
      resize: vertical
      margin-bottom: 0px
      @include border-radius(3px)

  p:last-child
    margin-top: 10px

#regenerate-key,
#remove-log
  .cancel
    text-decoration: underline
  p
    text-align: center
  .or
    display: inline-block
    margin: 20px 10px 0 10px
  p:last-of-type
    margin-bottom: 5px
  a.button
    font-size: 13px

#status-images, #regenerate-key
  input
    border: 1px solid $color-border-light
    width: 505px
    padding: 4px
    @include border-radius(3px)

#regenerate-key, #regeneration-success
  display: none
  width: 400px

#code-climate
  width: 500px
  padding: 5px 20px
  margin-left: -250px

  pre
    padding: 5px 10px

  ol
    padding-left: 15px
  img#code-climate-logo
    margin-right: 50px