@import "./initial.styl"

.offscreen
  height: 0
  overflow: hidden

select, input[type="text"], textarea
  height: 32px
  color: inherit
  background: transparent
  border: none
  border-bottom: 1px solid rgba(black, .2)
  border-radius: 0
  outline: none
  padding: .2rem
  margin: 0
  box-sizing: border-box
  appearance: none
  -webkit-appearance: none
  -moz-appearance: none

  &:focus
    border-color: #fc0

input[type="text"]
  padding: .1rem .5rem

button
  color: inherit
  background: transparent
  border: 1px solid #e8e8e8
  border-color: #dbdbdb #d2d2d2 #c9c9c9 #e8e8e8
  border-radius: 3px
  outline: none
  padding: .1rem 1.5rem
  margin: 0
  cursor: pointer

  &:active
    background: rgba(black, .02)

select
  padding-right: 1.5rem
  background: url(/res/common/downward_arrow.svg) calc(100% - .2rem) 50%/.8rem .5rem no-repeat

  &::-ms-expand
    display: none

  &:-moz-focusring
    color: transparent
    text-shadow: 0 0 0 black

.action-link
  text-decoration: dotted underline
  cursor: pointer

form
  max-width: 640px
  padding: 2rem
  margin: 0 auto

  .actions
    display: flex
    align-items: center

    .filler
      flex: 1

    .action-link
      margin-left: 1.25rem

  textarea
    width: 100%
    height: 6rem
    font-family: monospace
    font-size: .85rem
    border: 1px solid rgba(black, .2)
    margin: 0
    resize: vertical

    &[name="additional_headers"]
      height: 4rem

  [data-id="headers"] textarea,
  [data-id="response"] textarea,
  [data-id="curl"] textarea
    height: 14rem

  .field

    &:not(.offscreen)
      margin-top: 1rem

    &:first-child
      margin-top: 0

    &[data-id="path"]
      margin-top: .5rem
      margin-bottom: 1.5rem

    &[data-id="curl"]
      width: 100%
      max-height: 14rem
      font-family: monospace
      font-size: .85rem
      word-break: break-all
      padding: .2rem
      overflow: auto

  [name="path"]
    width: 100%

  [data-id="request"]
    display: flex

    select + select,
    select + input
      margin-left: .5rem

    [name="api"]
      flex: 1
