%popup
  width: 29em
  height: auto
  position: fixed
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  padding: 2.5em 2em
  color: #565656
  z-index: 99
  background-color: $white
  @extend %border-radius-4px

.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
  @extend %popup
  display: none
  width: 400px
  background-color: #fff
  border: solid 10px $cream-dark

  &:before
    content: ""

  .close
    position: absolute
    display: block
    right: 10px
    top: 10px
    width: 16px
    height: 16px
    @extend .icon
    @extend .icon--dismiss-grey
  h4
    margin-top: 0
    font-size: 18px
    font-weight: bold
    color: $color-text

  p
    font-size: $font-size-sm
    word-wrap: normal

  pre
    background-color: $color-bg-pre
    margin: 0
    padding: 5px 10px
    border-radius: 4px
    overflow-x: scroll

.status-images
  width: 100%
  @media #{$medium-up}
    width: 600px

  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
      border-radius: 3px

  p:last-child
    margin-top: 10px

#regenerate-key,
#remove-log-popup
  .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
  strong
    color: $red

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

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

#code-climate
  width: 100%
  ol
    padding-left: 1.2em
  @media #{$medium-up}
    width: 550px
